Categorise OSM passes by highway and colour them on the ride detail map

Passes are extracted from OSM PBF nodes (mountain_pass=yes) and linked to
containing ways; highway road values map to road, track to track,
path/footway to path, plus hiking for rock/climbing. All passes are kept,
coloured distinctly (road/track/path/hiking/unknown) for road-bike validation
on ride 397. Single squashed migration adds category column, cheap to re-extract.

2 files changed, 20 insertions, 8 deletions

diff --git a/web/frontend/ride-detail-map.ts b/web/frontend/ride-detail-map.ts
index a9b9c06..508829c 100644
--- a/web/frontend/ride-detail-map.ts
+++ b/web/frontend/ride-detail-map.ts
@@ -41,16 +41,27 @@ export class RideDetailMap {
       .addTo(this.map);
     const bounds = routeLayer.getBounds();
     if (bounds.isValid()) this.map.fitBounds(bounds, { padding: [24, 24], maxZoom: 15 });
-    const passIcon = leaflet.divIcon({
-      className: "ride-map-pass-icon",
-      html: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 19 10.5 6l3.25 5.5L16 8l5 11H3Z" fill="currentColor"/></svg>',
-      iconSize: [28, 28],
-      iconAnchor: [14, 14],
-    });
+    const passIconCache = new Map<string, DivIcon>();
+    const getPassIcon = (category: string): DivIcon => {
+      const cat = (category || "unknown").toLowerCase();
+      const valid = ["road", "track", "path", "hiking", "unknown"].includes(cat) ? cat : "unknown";
+      const cached = passIconCache.get(valid);
+      if (cached) return cached;
+      const icon = leaflet.divIcon({
+        className: `ride-map-pass-icon ride-map-pass-icon-${valid}`,
+        html: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 19 10.5 6l3.25 5.5L16 8l5 11H3Z" fill="currentColor"/></svg>',
+        iconSize: [28, 28],
+        iconAnchor: [14, 14],
+      });
+      passIconCache.set(valid, icon);
+      return icon;
+    };
     for (const pass of passes) {
-      const marker = leaflet.marker([pass.latitude, pass.longitude], { icon: passIcon, alt: pass.name || "Mountain pass" }).addTo(this.map);
+      const icon = getPassIcon(pass.category);
+      const marker = leaflet.marker([pass.latitude, pass.longitude], { icon, alt: pass.name || "Mountain pass" }).addTo(this.map);
       const tooltip = document.createElement("span");
-      tooltip.textContent = `${pass.name || "Mountain pass"} | ${Math.round(pass.elevationM)} m`;
+      const catLabel = pass.category ? ` · ${pass.category}` : "";
+      tooltip.textContent = `${pass.name || "Mountain pass"} | ${Math.round(pass.elevationM)} m${catLabel}`;
       marker.bindTooltip(tooltip);
     }
     this.climbLayers = climbs.map((climb) => this.createClimbLayer(climb));
diff --git a/web/frontend/types.d.ts b/web/frontend/types.d.ts
index d4c4bdf..790abe6 100644
--- a/web/frontend/types.d.ts
+++ b/web/frontend/types.d.ts
@@ -62,6 +62,7 @@ export interface RideMapPass {
   elevationM: number;
   latitude: number;
   longitude: number;
+  category: string;
 }
 
 export interface ClimbBounds {