Migrate map rendering from Leaflet to MapLibre GL #673
Conversation
- Removed Leaflet dependencies and related code from GrampsjsMap, GrampsjsMapMarker, and GrampsjsMapOverlay components. - Integrated MapLibre GL for map rendering and marker management. - Updated map style switching functionality to support MapLibre GL styles. - Enhanced marker and overlay handling using MapLibre GL's API. - Updated package dependencies to use MapLibre GL version 5.6.0 and removed obsolete packages.
…d GrampsjsMapMarker
There was a problem hiding this comment.
Pull Request Overview
This pull request migrates the map rendering functionality from Leaflet to MapLibre GL, eliminating legacy Leaflet dependencies and updating components to work with the new engine. Key changes include:
- Replacing Leaflet components (map overlay, marker) with MapLibre GL implementations.
- Updating the main map component to initialize a MapLibre GL map with new controls and style switcher.
- Adjusting dependency versions and removing obsolete styles and packages.
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/components/GrampsjsMapOverlay.js | Removed Leaflet image overlay and replaced with MapLibre GL image source/layer |
| src/components/GrampsjsMapMarker.js | Migrated marker creation from Leaflet to MapLibre GL using a custom SVG element |
| src/components/GrampsjsMap.js | Updated map initialization, controls, and style switching for MapLibre GL |
| package.json | Removed Leaflet and related types; updated maplibre-gl dependency |
| L.Control.Locate.min.css | Removed obsolete CSS for Leaflet locate control |
Comments suppressed due to low confidence (2)
src/components/GrampsjsMapOverlay.js:43
- [nitpick] Consider using String.slice instead of substr as it is more standardized and future-proof.
const id = `overlay-${this.title || 'image'}-${Math.random().toString(36).substr(2, 9)}`
src/components/GrampsjsMap.js:120
- Ensure that reversing the coordinate order from [lat, lng] to [lng, lat] aligns with MapLibre GL's expected format.
this._map.fitBounds([
[this.longMin, this.latMin],
[this.longMax, this.latMax],
])
|
Great work @muimsd, thank you! I tested it with the dev container and see only problem: when I open the map view, the map markers are not shown and the map is not automatically panned/zoomed to the center of the pins. Now: Before: Can you please have a look? If this is fixed, I think this is ready! 🚀 |
|
Sorry, I noticed some other issues.
with the following attribute: key: Before: After: Notice also that in the old implementation, the image was added to the layer switcher if the image was within the viewport. I'm afraid these are showstoppers as we need those features also in the new world. It would be great if you can get this to the finish line. Thanks! |
|
Some more observation: after a while (sometimes) the map overlay appears, but it is mirrored upside-down 🤔 |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
Hi, I checked again and sometimes the pins showed up on the map, sometimes not. I think it's because of an error that piles up in the browser console: Whenever that error occurs, obviously it will not process the rest and not display the pins. My guess is that Indeed, if I remove the problematic code from Regarding the overlay, I get a different error: |
It is completely working on my side. |
Please reply page URL to test it. |
Please send me the complete video with the browser window to see the actual route URL to track this issue, and also add the developer tool window of the browser to see console errors. |
Bildschirmaufnahme.2025-06-09.21.42.05.mp4 |
|
Note: you need to add at least one image overlay (i.e. an image with a |
|
See the comment above #673 (comment) for how to test map overlays.
|
In this video GrampsjsViewMap.js file has an error, which is a view. You did not mention this file to change. |
… update bounds format
|
More errors are coming from different map files. |
I have resolved this issue. |
|
Cool, thanks! The pins work now, but I still get the "Style is not done loading" both in Firefox and in Chrome, I think it is because the layer is added before the map is fully loaded: https://stackoverflow.com/questions/40557070/style-is-not-done-loading-mapbox-gl-js |
It will be great if you share a short screen recording. |
Bildschirmaufnahme.2025-06-10.20.06.27.mp4 |
I will try to replicate it on Firefox, then fix it. Currently, this error is not happening on Chrome. |
|
|
Yes, it's working now also on my side, thanks! |
|
Merging this into a separate branch as I'll need to tweak a few things before merging into master. |
Description: This pull request migrates the map rendering engine from Leaflet to MapLibre GL. It updates all relevant components, utilities, and dependencies to support MapLibre GL, providing improved performance, vector map rendering, and enhanced interactivity.
Key changes:
Replaced Leaflet map components and utilities with MapLibre GL equivalents
Updated dependencies and configuration files to remove Leaflet and add MapLibre GL
Refactored custom map logic as needed to support the new rendering engine