Use Geofield and Leaflet modules for maps, to respect user privacy

[gitressa]

To respect user privacy, usage of external resources should be kept at a minimum, or avoided entirely.

The Geolocation module contacts the external web site unpkg.com for the https://unpkg.com/[email protected]/dist/leaflet.js file, when it shows the map on /event/2024/nasas-boeing-crew-flight-test-launch. The maintainer stated in Allow to choose between local or external libraries that:

I think it's pretty likely that some people want to host the libraries locally, but they can do so using hook_js_alter() as they deem fit. Providing all the plumbing to handle this in a form and keeping this up to date in the future seems to much effort for an each case that can be solved fairly easily anyway.

So we could instead use Geofield module with the Leaflet module.

~~Leaflet module does currently contact fastly.net, but as soon as Support serving local scripts first, use CDN as fallback is fixed, Geofield with Leaflet ought to only contact the relevant map resource, which is openstreetmap.org~~. I was mistaken, OpenStreetMap uses fastly.net to serve its tiles, so fastly.net is necessary, and all is well with the Leaflet module.

Remaining tasks

Switch from Geolocation to Geofield and Leaflet.

[phenaproxima]

I'm totally open to this idea; the goal at the time I used Geolocation was to just get a freakin' map working on the event page in time for DrupalCon 😅 I tried with Geofield but I could NOT, for the life of me, figure out how to configure it. In other words, I ran into exactly the kind of problem that Starshot aims to solve. 😎

If you (or someone else?) submits a PR which changes to Geofield and Leaflet, whilst keeping the zero-setup, oh-look-I-immediately-have-a-working-map experience of the Event content type, then I will gladly merge that.

[gitressa]

Sounds fantastic, thanks for being open for this update! And yes, getting all the pieces to fit together for Geocoder, Geofield, et al can be challenging :)

I recently documented how to set up Geocoder to work with GPX-files based on a fantastic step-by-step guide by @FMB in Document GPX File Parsing Provider.

I would love to try to update the Starshot recipe, but I haven't worked with Recipes yet ... so I would probably have to spend some time understanding how it fits together. So instead of trying to create the new set up in a recipe, I decided to instead document how to set up Geocoder, Geofield and Address module in Using Address module with Geocoder and Geofield, perhaps you could give it a try?

After going through the steps in the documentation, to show the map in Starshot, you can add a "Map" block in Layout Builder. Click "Manage Layout" and then:

• Click "Configure Section 3"
• Add "Map", with these settings:
  • Formatter: Leaflet
  • Zoom: 16

Please let me know if any of the steps does not make sense, so I can update the documentation, thanks!

[gitressa]

OpenStreetMap, and the sites it contacts are located in these countries outside EU, which conflicts with GDPR compliance:

• openstreetmap.org: Canada/United States
• fastly.net: Canada/United States
• unpkg.com: Canada/United States

~~https://maps.wikimedia.org could be considered as an alternative map tile source, since it is located in the Netherlands when I checked with https://check-host.net/ip-info?host=maps.wikimedia.org.~~

~~We can use the https://git.drupalcode.org/project/leaflet_more_maps/ module to support this map provider.~~ Sadly, it does not work any more ... see Remove Wikimedia Maps.

Still, switching to Geocoder, Geofield and Address will remove the need to contact unpkg.com for the leaflet.js file.

[gitressa]

I checked https://wiki.openstreetmap.org/wiki/Raster_tile_providers and found an alternative tile provider https://openstreetmap.de/, which only contacts a single domain for map tiles, which is openstreetmap.de hosted at Hetzner in Germany.

I created the issue Add support for GDPR-friendly openstreetmap.de. Feel free to review, so that we perhaps can use that as map service for tiles in Starshot, with https://www.drupal.org/project/leaflet_more_maps?

[gitressa]

Good news, everyone! Leaflet More Maps 2.2 was just released, and it includes many improvements, among them the option of using openstreetmap.de for Leaflet tiles, completed via Add support for GDPR-friendly openstreetmap.de.

[gitressa]

I am still not sure how to work with recipes ... is there a documentation page which describes the basics?

If not, here are the steps for adding this feature, it shouldn't take an experienced Drupal developer too long:

Using Address module with Geocoder and Geofield

Here's how to set up Geofield and Geocoder to look up an address supplied via the Address module, and show it with Leaflet (optional).

1. Install Address, Geocoder, Geocoder Address, Geocoder Field, Geocoder Geofield, Geofield, and Leaflet (optional)
2. Install a provider, for example Nominatim (used by OpenStreetMap):
   composer require geocoder-php/nominatim-provider
3. Create a "Nominatim" Geocoder provider under /admin/config/system/geocoder/geocoder-provider:
   • Root URL: https://nominatim.openstreetmap.org
   • User Agent: Value of the User-Agent header, for example "Drupal example.org". Replace "example.org" with your URL.
   • Referer: Value of the Referer header, for example "https://example.org". Replace with your URL.
4. Create an Address field called "Location" in a content type, to supply an address
5. Create a Geofield field called "Map" in a content type, allowing only one value
6. Set up the Geofield field like this:
   • Geocode → Geocode from an existing field
   • Geocode from an existing field → select "Location [Address]"
   • Geocoder providers → check "Nominatim"
7. For the Geofield field, in "Manage display" choose "Leaflet Map" (if available) or just "Raw Output"

To test if it works, create new content, filling out the Address field. After saving the node, the coordinates for the address should be looked up, and the Leaflet map should show the location on the map.

https://www.drupal.org/docs/extending-drupal/contributed-modules/contributed-module-documentation/geofield/using-address-module-with-geocoder-and-geofield

[phenaproxima]

That all seems doable enough. Assigning to myself to get it done.

[phenaproxima]

User Agent: Value of the User-Agent header, for example "Drupal example.org". Replace "example.org" with your URL. Referer: Value of the Referer header, for example "https://example.org/". Replace with your URL.

These are problematic for us because, at install time, we don't know what our URL is or will be.

Can these be anything that look like a URL? For example, could I set a value of http://drupal-SOME_UUID.localhost?

[gitressa]

I think that would be all right, and for show casing work fine. But the user probably needs to update those values before going live.

[gitressa]

Two tips: I just went through the process, and enabled the modules with Drush:

drush in address geocoder geofield leaflet leaflet_more_maps geocoder_address geocoder_geofield geocoder_field

Also, when setting the display to use "Leaflet Map" (Step 7) under settings, set "Leaflet Map Tiles Layer" to "OpenStreetMap.de".

[mlncn]

Would it make sense to use tokens in the site-URL-dependent geocoder provider settings? If it does make sense and would solve our problem but it is not yet possible, we could open an issue to add token support?

[gitressa]

Adding token support is a great idea @mlncn.

[gitressa]

I guess it needs to be added in the individual Geocoder Plugins, like this one? https://git.drupalcode.org/project/geocoder/-/blob/8.x-4.x/src/Plugin/Geocoder/Provider/Nominatim.php.

[gitressa]

Thanks for creating the PR @phenaproxima, it works well. I just have a single comment, about using openstreetmap.de instead of openstreetmap.org, via Leaflet More Maps.

openstreetmap.org and fastly.net, which the current PR uses, are both located in Canada/United States, which conflicts with GDPR.

[gitressa]

Thanks for being open to this @phenaproxima, and for solving all the the difficult tasks to allow it to happen, I very much appreciate it.