Home button fits all of Slovakia; add an overview map, top-right
Home now fitBounds()s a country-wide bbox instead of resetting to CENTER/ZOOM's Bratislava point, since Home resetting into the same city you'd already be looking at wasn't useful. The overview map is NPS's own overview plugin (npmap5-plugins, still on an unmerged branch), vendored and converted from its UMD dist build to a plain ES module. Patched one MapLibre API break found while verifying it: the plugin reads map.transform (public in the MapLibre ~2.4 it targets) to relax the inset's polar pan limit; MapLibre 6 (this app's vendored version) no longer exposes .transform at all, so it threw on load. Guarded to skip that cosmetic adjustment when absent instead.
This commit is contained in:
1 parent
ddf2ee4990
commit
96065b1237
7 files changed
+441
-31
No files matched your search
+29
-8
@@ -14,6 +14,8 @@ import { MeasureControl } from "/js/measure.js";
|
||||
import { LAYERS_ICON } from "/js/icons.js";
|
||||
import { notifySidePanelOpen, onlyOneSidePanelOpen } from "/js/panels.js";
|
||||
import HomeButton from "/vendor/npmap-home-button/home-button.esm.js";
|
||||
import OverviewMap from "/vendor/npmap-overview/overview.esm.js";
|
||||
import * as maplibregl from "/vendor/maplibre-gl/maplibre-gl.mjs";
|
||||
|
||||
const CENTER = [17.1077, 48.1486];
|
||||
const ZOOM = 13;
|
||||
@@ -235,14 +237,18 @@ const map = new MaplibreMap({
|
||||
// all grouped together rather than split across corners. Added in this
|
||||
// order since MapLibre stacks same-position controls in add order.
|
||||
//
|
||||
// homePosition/zoom pinned to the app's own default rather than left to the
|
||||
// button's own fallback (current center/zoom at construction) — now that
|
||||
// the URL hash can restore any view on load (see the Hash option above),
|
||||
// "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
|
||||
// wouldn't be a home button. This is *not* "go to my location" — that's
|
||||
// GeolocateControl, below.
|
||||
map.addControl(new HomeButton({ homePosition: CENTER, zoom: ZOOM }), "top-left");
|
||||
// bounds (rather than homePosition/zoom) so Home resets to an overview of
|
||||
// the whole country, not back to CENTER/ZOOM's initial Bratislava view —
|
||||
// now that the URL hash can restore any view on load (see the Hash option
|
||||
// above), "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 wouldn't be a home button. This is *not* "go to my location" —
|
||||
// that's GeolocateControl, below.
|
||||
const SLOVAKIA_BOUNDS = [
|
||||
[16.83, 47.73],
|
||||
[22.57, 49.61],
|
||||
];
|
||||
map.addControl(new HomeButton({ bounds: SLOVAKIA_BOUNDS }), "top-left");
|
||||
// showCompass: false — this map never rotates, so a bearing-reset button
|
||||
// (NavigationControl's default third button) would just be dead weight.
|
||||
map.addControl(new NavigationControl({ showCompass: false }), "top-left");
|
||||
@@ -257,6 +263,21 @@ map.addControl(
|
||||
"top-left",
|
||||
);
|
||||
|
||||
// A small inset map showing where the current view sits in context — NPS's
|
||||
// own overview plugin (docs/nps-resources.adoc's "overview" entry, still on
|
||||
// an unmerged branch upstream). It draws its own embedded MapLibre map, so
|
||||
// it needs the maplibregl module itself (not just the Map class) — style
|
||||
// '' (the default) means it clones whatever the main map's current style
|
||||
// is (`this._mainMap.style.serialize()`), so it stays in sync with the
|
||||
// Online/Offline toggle without a second style to maintain here. Built only
|
||||
// once the main map's own style has loaded, matching the plugin's own
|
||||
// example — its internal map is constructed eagerly in the constructor,
|
||||
// before that clone happens in onAdd.
|
||||
map.once("style.load", () => {
|
||||
const OverviewMapControl = OverviewMap(maplibregl);
|
||||
map.addControl(new OverviewMapControl({}), "top-right");
|
||||
});
|
||||
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
|
||||
const layerToggle = new LayerToggleControl(applyStyle);
|
||||
|
||||
Reference in new issue
Block a user