From 152a08f9229d4e83e72c6ec1f8773389ae2ccfc6 Mon Sep 17 00:00:00 2001 From: Roman Priesol Date: Mon, 7 Sep 2026 17:12:21 +0200 Subject: [PATCH] Sync the map view to the URL, like Google Maps/OSM permalinks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Panning/zooming now updates #map=// 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. --- docs/architecture.adoc | 12 ++++++++++++ public/js/map.js | 6 ++++++ 2 files changed, 18 insertions(+) diff --git a/docs/architecture.adoc b/docs/architecture.adoc index 72b118c..22cd22a 100644 --- a/docs/architecture.adoc +++ b/docs/architecture.adoc @@ -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 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=//` 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 `public/js/radar.js` adds a "Radar" map control that overlays recent diff --git a/public/js/map.js b/public/js/map.js index 1a55f90..3ba1723 100644 --- a/public/js/map.js +++ b/public/js/map.js @@ -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");