Highlight trails in their own color instead of recoloring to yellow

public/js/hiking_trails.js

@@ -202,7 +202,7 @@ export class HikingTrailsControl {
 
     const matched = features.filter((feature, i) => features.findIndex((f) => f.properties.id === feature.properties.id) === i);
     const html = matched.map((feature) => routeHtml(feature.properties)).join("<hr>");
-    this._setHighlight(matched.map((feature) => feature.geometry));
+    this._setHighlight(matched.map((feature) => ({ geometry: feature.geometry, color: feature.properties.color })));
     const popup = new Popup({ closeButton: true, maxWidth: "260px" }).setLngLat(event.lngLat).setHTML(html).addTo(this._map);
     this._trackPopup(popup);
   }
@@ -249,7 +249,8 @@ export class HikingTrailsControl {
     // A newer click may have replaced this popup while Overpass was still
     // answering — don't paint a highlight for a selection that's already
     // stale.
-    if (this._activePopup === popup) this._setHighlight(relations.map(routeGeometry));
+    if (this._activePopup === popup)
+      this._setHighlight(relations.map((relation) => ({ geometry: routeGeometry(relation), color: normalizedTrailColor(relation.tags?.colour) })));
   }
 
   _addOnlineLayer() {
@@ -313,13 +314,16 @@ export class HikingTrailsControl {
     if (this._map.getSource(offlineSourceId(code))) this._map.removeSource(offlineSourceId(code));
   }
 
-  // geometries: an array of GeoJSON geometry objects (LineString or
+  // features: an array of { geometry, color } — geometry a GeoJSON
-  // MultiLineString, mixed is fine) — everything the last click matched,
+  // LineString or MultiLineString (mixed is fine), color the trail's own
-  // drawn as one highlight layer on top of the base trail rendering.
+  // (already-normalized) colour — everything the last click matched, drawn
-  _setHighlight(geometries) {
+  // as one highlight layer (a wider outline in the trail's own color,
+  // rather than a fixed color that would repaint it) on top of the base
+  // trail rendering.
+  _setHighlight(features) {
     const data = {
       type: "FeatureCollection",
-      features: geometries.map((geometry) => ({ type: "Feature", properties: {}, geometry })),
+      features: features.map(({ geometry, color }) => ({ type: "Feature", properties: { color }, geometry })),
     };
     const source = this._map.getSource(HIGHLIGHT_SOURCE_ID);
     if (source) {
@@ -332,7 +336,7 @@ export class HikingTrailsControl {
       type: "line",
       source: HIGHLIGHT_SOURCE_ID,
       layout: { "line-cap": "round", "line-join": "round" },
-      paint: { "line-color": "#fff176", "line-width": 5, "line-opacity": 0.9 },
+      paint: { "line-color": ["get", "color"], "line-width": 5, "line-opacity": 0.9 },
     });
   }