Sync the map view to the URL, like Google Maps/OSM permalinks
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:
1 parent
4447b6cebb
commit
152a08f922
2 files changed
+18
No files matched your search
@@ -103,6 +103,18 @@ No PMTiles file ships with the repository — it is expected to be
|
|||||||
supplied locally (see `docs/development.adoc`) and stays gitignored
|
supplied locally (see `docs/development.adoc`) and stays gitignored
|
||||||
because such extracts are typically large binary files.
|
because such extracts are typically large binary files.
|
||||||
|
|
||||||
|
== Map permalink
|
||||||
|
|
||||||
|
The map's `hash: "map"` option (`public/js/map.js`) turns on MapLibre
|
||||||
|
GL JS's built-in `Hash` control — nothing hand-rolled here. It keeps
|
||||||
|
`#map=<zoom>/<lat>/<lon>` in the URL in sync with the current view (via
|
||||||
|
`history.replaceState`, so panning never spams the back button) and,
|
||||||
|
if the page loads with one already in the URL, opens there instead of
|
||||||
|
the default `CENTER`/`ZOOM` — the same permalink pattern OSM and Google
|
||||||
|
Maps use, so copying the URL bar shares the exact spot someone's
|
||||||
|
looking at, and reloading the page doesn't reset the view back to the
|
||||||
|
default.
|
||||||
|
|
||||||
== Weather radar overlay
|
== Weather radar overlay
|
||||||
|
|
||||||
`public/js/radar.js` adds a "Radar" map control that overlays recent
|
`public/js/radar.js` adds a "Radar" map control that overlays recent
|
||||||
|
|||||||
@@ -108,6 +108,12 @@ const map = new MaplibreMap({
|
|||||||
style: ONLINE_STYLE,
|
style: ONLINE_STYLE,
|
||||||
center: CENTER,
|
center: CENTER,
|
||||||
zoom: ZOOM,
|
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");
|
map.addControl(new NavigationControl(), "bottom-right");
|
||||||
|
|||||||
Reference in new issue
Block a user