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:
randy committed 2026-08-25 22:38:56 +02:00
1 parent 06ea8ea141
commit 0887ccbfe7
12 files changed
+163 -217

No files matched your search

+28 -8
View File
@@ -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