Apply the NPS-inspired palette to the online map too
ONLINE_STYLE_PATCH mirrors OFFLINE_THEME's color choices onto OpenFreeMap Liberty's OpenMapTiles layer ids (a separate hand-built table -- the two schemas share no layer names). loadOnlineStyle fetches Liberty's style.json once, patches it in place, and the result replaces the plain URL everywhere ONLINE_STYLE is used -- MapLibre accepts a style object anywhere it accepts a style URL, so applyStyle needed no change. Runs before the map (and the rest of the page) is constructed, so there's no flash of Liberty's own colors first -- but with a 3s timeout and a catch-all fallback to the plain URL, since this app is meant to keep working offline in the field and blocking startup on a remote style server would undermine that. Verified in a real browser: online map now visually matches the offline theme (cream ground, brown/khaki land cover, green parks, muted roads), no console errors, Online/Offline toggle still works.
This commit is contained in:
1 parent
24b6180c03
commit
ceaaa0bb92
3 files changed
+134
-3
No files matched your search
@@ -121,6 +121,31 @@ 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.
|
||||
|
||||
The Online map (OpenFreeMap Liberty) gets the same treatment via
|
||||
`ONLINE_STYLE_PATCH`, a separate hand-built table — Liberty is an
|
||||
OpenMapTiles-schema style, with its own layer ids (`landcover_wood`,
|
||||
`road_secondary_tertiary`, `boundary_2`, ...) that don't correspond to
|
||||
protomaps' theme roles, so the two palettes can't share one object,
|
||||
only the same underlying color choices. `loadOnlineStyle`
|
||||
(`public/js/map.js`) fetches Liberty's `style.json` once, patches it
|
||||
in place, and uses the resulting object everywhere `ONLINE_STYLE` used
|
||||
to be a plain URL string — MapLibre accepts a style object anywhere it
|
||||
accepts a style URL, so `applyStyle`'s `map.setStyle(... : ONLINE_STYLE)`
|
||||
needed no change. That fetch runs before the map (and the rest of the
|
||||
page) is constructed — a top-level `await` — so there's no flash of
|
||||
Liberty's own colors before the patch lands; a 3s timeout and a
|
||||
catch-all fall back to the plain URL (letting MapLibre fetch and
|
||||
render it unpatched) rather than block the whole page's startup on a
|
||||
remote style server, since this app is meant to keep working offline
|
||||
in the field, independent of whether the online map itself loads.
|
||||
Only the layers that dominate the map's overall color read are
|
||||
patched (land cover, water, parks, roads, boundaries, buildings) —
|
||||
same deliberately-partial scope as `OFFLINE_THEME`, not a full
|
||||
per-layer recolor. Road casings are the one addition with no
|
||||
protomaps-role equivalent to reuse, since offline roads don't get a
|
||||
separate outline color there; `#c9a66b` is reasoned to fit the family
|
||||
rather than sourced from anywhere real.
|
||||
|
||||
== Map permalink
|
||||
|
||||
The map's `hash: "map"` option (`public/js/map.js`) turns on MapLibre
|
||||
|
||||
Reference in new issue
Block a user