On the project quefairedemesdechets.fr we recently migrate from Leaflet to MapLibre. Here I try to explain why and how.
Performance
MapLibre has better performances, this is because it use WebGL technologie
MapLibre allow to use vector tiles as base map while Leaflet uses rasters, which is a set of images by zoom level. The consequence is that loading map in Maplibre is faster and smoother and the user experience is also enhance when user zoom in and out. Even if we don’t migrate to vector tile in quefairedemesdechets.fr(we plan to migrate to vector tiles in a next iteration), I notice that the navigation is smoother.
Marker Management is also easier to manage, with leaflet we used to. give a html as string to the Marker to display a custom pinpoint while with MapLibre we build pinpoint as an element in the page and tel to MapLibre to create a Marker using this element. It allows us to build element using our templating solution and we gain maintainability and are able to manage our pinpoint in our lookbook.
Last but not least, we plan to make our map and data open to external contribution, MapLibre allow a veryeasy way to drag and drop Marker which would help a lot .
How we migrate
Here is the Pull Request : https://github.com/incubateur-ademe/quefairedemesobjets/pull/1944
Actually it was pretty easy, because the APIs are very closed.
Main enhancement was to build pinpoint html asside the map and tell the map to use it as marker