`,\n iconSize: [18, 18], iconAnchor: [9, 9], className: \"\",\n });\n userMarkerRef.current = L.marker([userLocation.lat, userLocation.lon], { icon })\n .addTo(mapRef.current)\n .bindPopup(\"📍 You are here\");\n }, [userLocation]);\n\n // Destination marker\n useEffect(() => {\n if (!mapRef.current) return;\n if (destMarkerRef.current) destMarkerRef.current.remove();\n if (!destination) return;\n\n const icon = L.divIcon({\n html: `

`,\n iconSize: [28, 28], iconAnchor: [14, 28], className: \"\",\n });\n destMarkerRef.current = L.marker([destination.lat, destination.lon], { icon })\n .addTo(mapRef.current)\n .bindPopup(\"🏁 Destination\");\n }, [destination]);\n\n // Incident markers\n useEffect(() => {\n if (!mapRef.current) return;\n incidentMarkersRef.current.forEach(m => m.remove());\n incidentMarkersRef.current = [];\n\n incidents.forEach((inc) => {\n const emoji = INCIDENT_ICONS[inc.type] || INCIDENT_ICONS.DEFAULT;\n const color = inc.severity >= 3 ? \"#ef4444\" : inc.severity === 2 ? \"#f97316\" : \"#facc15\";\n const icon = L.divIcon({\n html: `

${emoji}

`,\n iconSize: [30, 30], iconAnchor: [15, 15], className: \"\",\n });\n\n const delayText = inc.delay > 0 ? `
⏱ +${inc.delay} min delay` : \"\";\n const marker = L.marker([inc.lat, inc.lon], { icon })\n .addTo(mapRef.current)\n .bindPopup(`\n

${emoji} ${inc.type.replace(/_/g, \" \")}

${inc.description}

\n ${delayText}\n

\n `);\n incidentMarkersRef.current.push(marker);\n });\n }, [incidents]);\n\n // Route polylines\n useEffect(() => {\n if (!mapRef.current) return;\n routeLayersRef.current.forEach(l => l.remove());\n routeLayersRef.current = [];\n if (!destination || !userLocation) return;\n\n routes.forEach((route, idx) => {\n const isSelected = idx === selectedRoute;\n const isBest = idx === 0;\n const color = isSelected ? (isBest ? \"#22c55e\" : \"#3b82f6\") : \"#475569\";\n const weight = isSelected ? 5 : 3;\n const opacity = isSelected ? 0.9 : 0.4;\n\n // Simulate a curved route with intermediate waypoints\n const origin = userLocation;\n const dest = destination;\n const midLat = (origin.lat + dest.lat) / 2 + (idx === 1 ? 0.015 : -0.008);\n const midLon = (origin.lon + dest.lon) / 2 + (idx === 1 ? -0.02 : 0.01);\n\n const points = [\n [origin.lat, origin.lon],\n [(origin.lat + midLat) / 2, (origin.lon + midLon) / 2],\n [midLat, midLon],\n [(midLat + dest.lat) / 2, (midLon + dest.lon) / 2],\n [dest.lat, dest.lon],\n ];\n\n const line = L.polyline(points, { color, weight, opacity, dashArray: isSelected ? undefined : \"6 4\" })\n .addTo(mapRef.current);\n\n if (isSelected) {\n const mins = Math.round(route.summary.travelTimeInSeconds / 60);\n const delay = Math.round(route.summary.trafficDelayInSeconds / 60);\n line.bindPopup(`\n

\n ${route.label}
\n 🕐 ${mins} min total
\n ${delay > 0 ? `⏱ +${delay} min traffic delay` : \"✅ No significant delays\"}\n

\n `);\n }\n routeLayersRef.current.push(line);\n });\n\n // Fit to route\n if (routes.length > 0) {\n const bounds = L.latLngBounds([\n [userLocation.lat, userLocation.lon],\n [destination.lat, destination.lon],\n ]);\n mapRef.current.fitBounds(bounds.pad(0.2), { animate: true });\n }\n }, [routes, selectedRoute, destination, userLocation]);\n\n return

;\n}\n","deleted","label",[181,182,164],"frontend","components","permalink","https://www.val.town/x/bartimeaus/TrafficIQ/code/frontend/components/MapView.tsx","extension","tsx","actionData","errors"]