Move the locate-me button into the top-left control stack
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:
1 parent
8fa3391c6b
commit
88637ded22
2 files changed
+19
-18
No files matched your search
@@ -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
@@ -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");
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user