Sync the map view to the URL, like Google Maps/OSM permalinks
CI / check (push) Successful in 41s
CI / deploy (push) Successful in 19s

Panning/zooming now updates #map=<zoom>/<lat>/<lon> in the URL, and loading
a URL with one already opens at that view instead of the default center —
so copying the URL bar shares the exact spot someone's looking at, and a
page reload doesn't lose the current view either.

This is MapLibre GL JS's own built-in Hash control (hash: "map" on the Map
constructor) — it already does exactly this, replaceState and all, no
custom code needed.
This commit is contained in:
randy committed 2026-09-07 17:12:21 +02:00
1 parent 4447b6cebb
commit 152a08f922
2 files changed
+18

No files matched your search

+6
View File
@@ -108,6 +108,12 @@ const map = new MaplibreMap({
style: ONLINE_STYLE,
center: CENTER,
zoom: ZOOM,
// MapLibre's built-in Hash control: keeps #map=zoom/lat/lon in the URL in
// sync with the view (via history.replaceState, so panning doesn't spam
// the back button) and, if the page loads with one already in the URL,
// opens there instead of the default CENTER/ZOOM — the same "grab the URL
// to share this exact spot" permalink pattern OSM/Google Maps use.
hash: "map",
});
map.addControl(new NavigationControl(), "bottom-right");