Add a Hiking trails overlay (Waymarked Trails, online only)

New Overlays panel toggle, same plain on/off shape as Contour lines —
raster tiles from waymarkedtrails.org, which already color each route
by its OSM colour tag (the KST/KČT paint-blaze colors used in
Slovakia/Czechia, plain red elsewhere), so no styling work needed here.

Online only for now; offline (baked into offline.pmtiles) needs a
custom Planetiler profile for route relations, deferred until there's
a route planner/router to pair it with.

public/js/hiking_trails.js

@@ -0,0 +1,74 @@
+import { WALKING_ICON } from "/js/icons.js";
+import { firstSymbolLayerId } from "/js/radar.js";
+
+const SOURCE_ID = "hiking-trails";
+const LAYER_ID = "hiking-trails-line";
+
+// Pre-rendered raster tiles, not vector — waymarkedtrails.org already
+// colors each route by its OSM `colour` tag (the KST/KČT-style paint-blaze
+// colors used in Slovakia/Czechia), falling back to plain red where a route
+// has none, so there's no styling to do here ourselves. Online only, same
+// "quietly renders nothing without a network" story as the Wikipedia/Radar/
+// Contour lines overlays — an offline copy (baked into offline.pmtiles) is
+// a TODO for once there's a route planner to pair it with, see TODO.adoc.
+const TILE_URL = "https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png";
+const ATTRIBUTION =
+  'Trails &copy; <a href="https://waymarkedtrails.org" target="_blank">Waymarked Trails</a> (CC-BY-SA), map data &copy; OpenStreetMap contributors';
+const OPACITY = 0.85;
+
+// A plain on/off Overlays item, same shape as ContourControl — one static
+// raster overlay, no scrub/forecast controls to expand into.
+export class HikingTrailsControl {
+  constructor(map) {
+    this._map = map;
+    this._active = false;
+
+    // setStyle() (switching Online/Offline) tears down all custom sources/
+    // layers — put this back if it was on, same as every other Overlays
+    // control.
+    map.on("style.load", () => {
+      if (this._active) this._addLayer();
+    });
+  }
+
+  mount(li) {
+    li.innerHTML = `
+      <label>
+        <input type="checkbox" class="overlays-panel__toggle">
+        <span class="overlays-panel__icon">${WALKING_ICON}</span>
+        <span>Hiking trails</span>
+      </label>
+    `;
+    this._checkbox = li.querySelector(".overlays-panel__toggle");
+    this._checkbox.addEventListener("change", (event) => this._toggle(event.target.checked));
+  }
+
+  _toggle(active) {
+    this._active = active;
+    if (active) this._addLayer();
+    else this._removeLayer();
+  }
+
+  _addLayer() {
+    if (this._map.getSource(SOURCE_ID)) return;
+
+    this._map.addSource(SOURCE_ID, {
+      type: "raster",
+      tiles: [TILE_URL],
+      tileSize: 256,
+      maxzoom: 17,
+      attribution: ATTRIBUTION,
+    });
+    // Below labels (same firstSymbolLayerId spot contour.js/radar.js use),
+    // so place names/POI icons stay readable on top of the trail lines.
+    this._map.addLayer(
+      { id: LAYER_ID, type: "raster", source: SOURCE_ID, paint: { "raster-opacity": OPACITY } },
+      firstSymbolLayerId(this._map),
+    );
+  }
+
+  _removeLayer() {
+    if (this._map.getLayer(LAYER_ID)) this._map.removeLayer(LAYER_ID);
+    if (this._map.getSource(SOURCE_ID)) this._map.removeSource(SOURCE_ID);
+  }
+}

public/js/icons.js

@@ -328,7 +328,11 @@ const FISHING_ICON = `
 const SCENIC_VIEWPOINT_ICON = `
 <svg viewBox="0 0 22 22" fill="currentColor"><g transform="translate(4.000000, 0.000000)"><path d="M3.2,11c0,1.2-0.9,2.2-2.1,2.2c-1.2,0-2.1-1-2.1-2.2 c0-1.2,0.9-2.2,2.1-2.2C2.2,8.8,3.2,9.8,3.2,11"/><path d="M4.6,10.4v1.3l10.6,0.8v-3L4.6,10.4"/><path d="M2.3,7.5l1.1,0.7L7.7,2L5.3,0.5L2.3,7.5"/><path d="M4.4,9.8l7.9-3.8l-1.4-2.6L3.8,8.6L4.4,9.8z"/><path d="M2.3,14.5l1.1-0.7l4.3,6.2l-2.4,1.5L2.3,14.5"/><path d="M3.8,13.4l0.6-1.2l7.9,3.8l-1.4,2.6L3.8,13.4"/></g></svg>`;
 
-const WALKING_ICON = `
+// Exported (unlike the other POI glyphs around it) — also used as the
+// Overlays panel's Hiking trails glyph (hiking_trails.js), same "reuse an
+// existing NPS-sourced pictogram" story as WILDERNESS_ICON above rather
+// than hand-drawing another one.
+export const WALKING_ICON = `
 <svg viewBox="0 0 22 22" fill="currentColor"><path d="M10.4,3.6c1,0,1.8-0.8,1.7-1.8c0-1-0.8-1.8-1.8-1.7c-1,0-1.8,0.8-1.7,1.8C8.6,2.8,9.5,3.6,10.4,3.6z"/><path d="M16.5,9.5L13.9,8l-2.2-3.4c-0.3-0.4-0.9-0.8-1.5-0.7C9.7,4,9.3,4.2,9,4.4L5.8,7.7C5.7,7.8,5.6,8,5.6,8.1l-0.4,3.6 c0,0,0,0.1,0,0.1c0,0.4,0.4,0.8,0.8,0.8c0.4,0,0.7-0.4,0.8-0.8l0.3-3.1l1.1-1.1l-1,8.6l-1.9,4.1c-0.1,0.1-0.1,0.3-0.1,0.5 c0,0.7,0.6,1.2,1.2,1.2c0.5,0,0.9-0.3,1.1-0.7l2-4.4c0-0.1,0.2-0.4,0.2-0.5l0.2-2.1l2.1,6.9c0.2,0.5,0.6,0.8,1.2,0.8 c0.7,0,1.2-0.6,1.2-1.2c0-0.1,0-0.1,0-0.2L11.5,11l0.4-3.1l0.8,1.3c0.1,0.1,0.1,0.2,0.2,0.2l2.8,1.6c0.1,0,0.2,0.1,0.4,0.1 c0.4,0,0.8-0.4,0.8-0.8C16.9,9.8,16.7,9.6,16.5,9.5z"/></svg>`;
 
 const GUIDED_TOURS_ICON = `

public/js/overlays.js

@@ -5,6 +5,7 @@ import { svgToImageData, badgeImageId, escapeHtml } from "/js/gpx.js";
 import { RadarControl } from "/js/radar.js";
 import { ShadowControl } from "/js/shadow.js";
 import { ContourControl } from "/js/contour.js";
+import { HikingTrailsControl } from "/js/hiking_trails.js";
 
 const ICON_IMAGE_SIZE = 48; // rasterized once at this size, rendered much smaller by icon-size below
 const ICON_SIZE = 0.3; // 48 * 0.3 = ~14px, sized to sit inside the marker badge below
@@ -184,6 +185,7 @@ export class OverlaysControl {
     this._radar = new RadarControl(map);
     this._shadow = new ShadowControl(map);
     this._contour = new ContourControl(map);
+    this._hikingTrails = new HikingTrailsControl(map);
     this._wikiEnabled = false; // the checkbox's own state
     this._wikiMoveHandler = null; // the moveend listener driving its live refetch, while enabled
     this._wikiRequestSeq = 0; // ignores an in-flight refetch a newer one has already superseded
@@ -217,13 +219,15 @@ export class OverlaysControl {
       <li class="overlays-panel__item overlays-panel__item--expandable"></li>
       <li class="overlays-panel__item overlays-panel__item--expandable"></li>
       <li class="overlays-panel__item"></li>
+      <li class="overlays-panel__item"></li>
     `;
-    const [hillshadeItem, wikiItem, radarItem, shadowItem, contourItem] = list.children;
+    const [hillshadeItem, wikiItem, radarItem, shadowItem, contourItem, hikingTrailsItem] = list.children;
     this._hillshade.mount(hillshadeItem);
     this._mountWiki(wikiItem);
     this._radar.mount(radarItem);
     this._shadow.mount(shadowItem);
     this._contour.mount(contourItem);
+    this._hikingTrails.mount(hikingTrailsItem);
 
     onlyOneSidePanelOpen(this._panel, () => this._icon.classList.remove("active"));