Move the locate-me button into the top-left control stack
CI / check (push) Successful in 42s
CI / deploy (push) Successful in 16s

GeolocateControl was alone at bottom-right while Home/zoom/base-map were
grouped top-left — split across two corners instead of one stack like
the National Park Service's own map controls. Moved it in, between zoom
and the base-map button.
This commit is contained in:
randy committed 2026-09-07 20:37:43 +02:00
1 parent 8fa3391c6b
commit 88637ded22
2 files changed
+19 -18

No files matched your search

+7 -6
View File
@@ -141,15 +141,16 @@ sits top-left on the map, pinned to `CENTER`/`ZOOM` explicitly rather
than its own fallback (the view at construction time, which would just than its own fallback (the view at construction time, which would just
be wherever a loaded permalink happened to point). It resets to the be wherever a loaded permalink happened to point). It resets to the
app's default view, not the visitor's own location — that's app's default view, not the visitor's own location — that's
`GeolocateControl`, a separate button at bottom-right. `GeolocateControl`, a separate button in the same stack (below).
That Home button is the top of a small top-left stack — Home, zoom That Home button is the top of a small top-left stack — Home, zoom
in/out (`NavigationControl`, `showCompass: false` since this map never in/out (`NavigationControl`, `showCompass: false` since this map never
rotates), and a "Base map" button — matching the National Park rotates), locate-me (`GeolocateControl`), and a "Base map" button —
Service's own map control layout (grouped together on the map itself, matching the National Park Service's own map control layout (grouped
rather than split between the map and a side panel). The last of together on the map itself, rather than split across corners or
those, `MapLayersButton` (`public/js/map.js`), is a second entry point between the map and a side panel). The last of those,
into the exact same Online/Offline panel `LayerToggleControl` already `MapLayersButton` (`public/js/map.js`), is a second entry point into
the exact same Online/Offline panel `LayerToggleControl` already
manages in the page's own sidebar — both call the same manages in the page's own sidebar — both call the same
`LayerToggleControl#toggle()`, so there's one source of truth for the `LayerToggleControl#toggle()`, so there's one source of truth for the
panel's open/closed state either way. panel's open/closed state either way.
+12 -12
View File
@@ -195,17 +195,9 @@ const map = new MaplibreMap({
hash: "map", hash: "map",
}); });
map.addControl( // A compact top-left stack — Home, zoom, locate-me, base map — matching
new GeolocateControl({ // the National Park Service's own map control layout, all grouped
positionOptions: { enableHighAccuracy: true }, // together rather than split across corners. Added in this order since
trackUserLocation: true,
showAccuracyCircle: true,
}),
"bottom-right",
);
// A compact top-left stack — Home, zoom, base map — matching the National
// Park Service's own map control layout. Added in this order since
// MapLibre stacks same-position controls in add order. // MapLibre stacks same-position controls in add order.
// //
// homePosition/zoom pinned to the app's own default rather than left to the // homePosition/zoom pinned to the app's own default rather than left to the
@@ -214,11 +206,19 @@ map.addControl(
// "current view" and "the default view" are no longer the same thing, and // "current view" and "the default view" are no longer the same thing, and
// a home button that resets to wherever you happened to load the page // a home button that resets to wherever you happened to load the page
// wouldn't be a home button. This is *not* "go to my location" — that's // wouldn't be a home button. This is *not* "go to my location" — that's
// GeolocateControl, above. // GeolocateControl, below.
map.addControl(new HomeButton({ homePosition: CENTER, zoom: ZOOM }), "top-left"); map.addControl(new HomeButton({ homePosition: CENTER, zoom: ZOOM }), "top-left");
// showCompass: false — this map never rotates, so a bearing-reset button // showCompass: false — this map never rotates, so a bearing-reset button
// (NavigationControl's default third button) would just be dead weight. // (NavigationControl's default third button) would just be dead weight.
map.addControl(new NavigationControl({ showCompass: false }), "top-left"); map.addControl(new NavigationControl({ showCompass: false }), "top-left");
map.addControl(
new GeolocateControl({
positionOptions: { enableHighAccuracy: true },
trackUserLocation: true,
showAccuracyCircle: true,
}),
"top-left",
);
const sidebar = document.getElementById("sidebar"); const sidebar = document.getElementById("sidebar");