Drop the OsmAnd-recolor map theme, add offline labels and a lighter palette nudge
Remove osmand-style.js (the per-layer color-patching approach) and its docs entirely — back to the plain OpenFreeMap "liberty" style online, and protomaps-themes-base's stock theme offline as the base. Offline maps previously had no text labels at all: the protomaps-themes-base layers() call never passed a lang option, which is required to include its label layers. Fixed, backed by vendored Noto Sans Regular/Italic/Medium glyph PBFs (ranges 0-255 and 256-511 only — Basic Latin + Latin-1 Supplement + Latin Extended-A, enough for accented Central European place names; other scripts won't render offline). Verified against the actual offline.pmtiles vector layer schema that the name/name:en/script fields this expects are present. Also nudge a handful of OFFLINE_THEME color roles (background, water, wood, buildings, the two road-importance tiers) towards the online style's actual palette (sampled from its style JSON) so switching Online/Offline doesn't look like two different apps — deliberately partial, not the removed full recolor.
This commit is contained in:
1 parent
06ea8ea141
commit
0887ccbfe7
12 files changed
+163
-217
No files matched your search
+28
-8
@@ -7,24 +7,41 @@ import {
|
||||
import { RadarControl } from "/js/radar.js";
|
||||
import { GpxPanelControl } from "/js/gpx.js";
|
||||
import { GnssControl } from "/js/gnss.js";
|
||||
import { onlineStyle, offlineTheme } from "/js/osmand-style.js";
|
||||
import { LAYERS_ICON } from "/js/icons.js";
|
||||
import { notifySidePanelOpen, onlyOneSidePanelOpen } from "/js/panels.js";
|
||||
|
||||
const CENTER = [17.1077, 48.1486];
|
||||
const ZOOM = 13;
|
||||
const ONLINE_STYLE = "https://tiles.openfreemap.org/styles/liberty";
|
||||
|
||||
const protocol = new pmtiles.Protocol();
|
||||
addProtocol("pmtiles", protocol.tile);
|
||||
|
||||
// No label layers here (see docs/architecture.adoc): rendering text needs a
|
||||
// glyphs server, which the offline style deliberately does not depend on.
|
||||
// A few color roles nudged from protomaps-themes-base's stock "light" theme
|
||||
// towards the online OpenFreeMap "liberty" style's actual palette (sampled
|
||||
// from its style JSON — see docs/architecture.adoc), so switching between
|
||||
// Online/Offline doesn't look like two different apps. Not a full recolor:
|
||||
// most roles (labels, casings, minor terrain fills, ...) are left at their
|
||||
// theme defaults.
|
||||
const OFFLINE_THEME = {
|
||||
...protomaps_themes_base.namedTheme("light"),
|
||||
background: "#f8f4f0",
|
||||
earth: "#f8f4f0",
|
||||
water: "#9ebdff",
|
||||
wood_a: "#ace38c",
|
||||
wood_b: "#ace38c",
|
||||
buildings: "#dcd9d6",
|
||||
highway: "#f2934a",
|
||||
major: "#ffeeaa",
|
||||
link: "#ffeeaa",
|
||||
};
|
||||
|
||||
function offlineStyle() {
|
||||
const theme = offlineTheme(protomaps_themes_base.namedTheme("light"));
|
||||
const pmtilesUrl = `${window.location.origin}/tiles/offline.pmtiles`;
|
||||
|
||||
return {
|
||||
version: 8,
|
||||
glyphs: `${window.location.origin}/vendor/fonts/{fontstack}/{range}.pbf`,
|
||||
sources: {
|
||||
offline: {
|
||||
type: "vector",
|
||||
@@ -32,7 +49,10 @@ function offlineStyle() {
|
||||
attribution: "© OpenStreetMap contributors",
|
||||
},
|
||||
},
|
||||
layers: protomaps_themes_base.layers("offline", theme),
|
||||
// lang: "en" pulls in labels_layers (see docs/architecture.adoc) — only
|
||||
// the Latin-script glyph ranges are vendored, so labels using other
|
||||
// scripts won't render offline.
|
||||
layers: protomaps_themes_base.layers("offline", OFFLINE_THEME, { lang: "en" }),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -83,7 +103,7 @@ class LayerToggleControl {
|
||||
|
||||
const map = new MaplibreMap({
|
||||
container: "map",
|
||||
style: await onlineStyle(),
|
||||
style: ONLINE_STYLE,
|
||||
center: CENTER,
|
||||
zoom: ZOOM,
|
||||
});
|
||||
@@ -108,9 +128,9 @@ new GpxPanelControl(map).mount(sidebar);
|
||||
new RadarControl(map).mount(sidebar);
|
||||
new GnssControl(map).mount(sidebar);
|
||||
|
||||
async function applyStyle(name) {
|
||||
function applyStyle(name) {
|
||||
layerToggle.setActive(name);
|
||||
map.setStyle(name === "offline" ? offlineStyle() : await onlineStyle());
|
||||
map.setStyle(name === "offline" ? offlineStyle() : ONLINE_STYLE);
|
||||
}
|
||||
|
||||
// If a local PMTiles file is present, prefer it as the default style — its
|
||||
|
||||
Reference in new issue
Block a user