diff options
Diffstat (limited to 'web/frontend')
| -rw-r--r-- | web/frontend/ride-detail-map.ts | 27 | ||||
| -rw-r--r-- | web/frontend/types.d.ts | 1 |
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 { |