Switch from Google Maps to Leaflet and OpenStreetMap with Geolocation on Drupal 8

Une carte routière

May 2, 2018 Google has announced a major policy change regarding the use of its online services, including its popular mapping service Google Maps and all its associated APIs, to embed or generate location-based information. This policy change now pays for a service that was previously available for free under some relatively generous quota limits starting June 11, 2018. Please read this post for full details on this policy change and its implications. : Do not be evil...until...

This change to the Google Maps usage rules is a cruel reminder that Google's business model can be very similar, to quote the article cited above, with the crack dealer business model... the first doses are free and it becomes ruinous when you're addicted.

Even though most of the websites that I can make, or maintain, often have moderate use of Google Maps, and would most likely remain below the limit of the new monthly quota, the fact remains that this policy change puts you in a situation that you can not control once your bank details filled in order to continue the services of Google.

It is time to stop using these solutions, out of habit or out of ease, and to see what is doing very well elsewhere.

Let's look at how on Drupal 8 we can switch to an open source solution based on Leaflet and OpenStreetMap. We have several solutions with Drupal to implement a geolocation or mapping service.

On the one hand we can use modules Geofield, Geocoder and Leaflet. But these modules are very agnostic and are generally used already with OpenStreetMap.

On the other hand we have the Geolocation module which is a real toolbox and an extremely complete solution, almost out of the box, and actively maintained. It is also one of the most used modules for generating maps with Drupal 8. And it also has some advantages that make it particularly flexible and versatile, such as the possibility of overloading from the content creation page the various settings of the map configured globally at the level of the field itself. In short, Geolocation can be considered as an all-in-one solution, compared to the Geofield and Leaflet modules, which takes care of storing geographic data (Geofield) and displaying it (Leaflet).

Only small problem with Geolocation, This is a module heavily oriented on Google Maps, or even exclusively oriented Google Maps ...

.. At least until version 2.x of the module under development (a beta version is available). Indeed, with version 2 of the Geolocation module, we now also have the support of OpenStreetMap and Leaflet to generate beautiful open source maps. And this without almost any effort.

And with this addition, which was accompanied by a deep redesign of the module, changing the mapping system to leave the shores of Google and boarding with OpenStreetMap is a breeze. A big thanks to the maintainer of this module @christianadamski.

Migrate from Google Maps to OSM with Geolocation

Une carte GoogleMaps

Let's take a closer look at how to switch our maps generated with Google Maps to use Leaflet and OpenStreetMap.

We will take as support, to illustrate the few manipulations to make, a classic configuration, namely a Geolocation field created on a content type, or a paragraph, to locate a point, an address on a map. Note, as I write these lines, I invite you to use the development version, until the next version 2.0-beta2 is released with all the corrections made since the beta 1.

For users of Geolocation 8.1.x you can upgrade to 2.x without worry. there is no change in storage or data model. We can launch the module upgrade serenely with composer.

composer require drupal / geolocation: 2.x-dev

Once the source code is updated, you can start an update of the database. This update included with version 2.x is limited to just activate its sub-module Geolocation Google Maps by default, because now all features related to Google Maps have been integrated into this new sub module.

And we do not fail to activate the Geolocation Leaflet sub-module to make our transition smoothly.

The switch to OpenStreetMap can be done in a few clicks. We just need to select the Geolocation Leaflet - Geocoding and Map widget in the form view configuration, and then the Geolocation Leaflet - Map formatter for the display configuration.

widget leaflet

Let's configure the widget and the formatter of our Geolocation field. We can note that, besides the standard configuration elements such as the marker information, the position, the zoom level, we find the possibility of overriding the configuration of the widget from the content creation form if necessary.

Formatter Leaflet


Et hop. That's it. We now have a new map based this time on Leaflet and OpenStreetMap, without the necessary data recovery, since in the end we only changed the way the geographic data stored by the module is rendered.

Carte OSM


Thanks to the Geolocation module, in version 2.x, we can switch to an open source cartographic solution very simply and almost effortlessly. Admittedly, there is not (yet) all the functional wealth of Google Maps in the widget configuration or the display settings, but the essential is present. And I do not doubt that the module will get rich very quickly.

And you, have you already made the transition to OpenStreetMap?



Soumis par Gyta (non vérifié) le 04/01/2019 à 15:31 - Permalien

If I have Drupal 7, could this scenario work too?

Soumis par Anonyme (non vérifié) le 07/02/2020 à 17:55 - Permalien

Thanks for the post :)

This is very useful article if you are using Geolocation 8.x-2.x. Things have changed somewhat in the 8.x-3.x branch. Now there is no **Geolocation Leaflet - Map formatter** field formatter. Instead you select the "Geolocation Formatter - Map" formatter and then select the **Leaflet** map provider.

Ajouter un commentaire