TrafficIQ — Real-Time Traffic & Routes

\n \n\n\n",[],[135,186],"13678cc0-34de-11f1-9ff8-42b51c65c3df","Sidebar.tsx","7811a2fa-34d9-11f1-9c0b-42b51c65c3df","37b57740-34d9-11f1-be1d-42b51c65c3df",["D",1775826383795],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { AppTab, Coords, FlowData, Incident, Route } from \"./App.tsx\";\n\ninterface SidebarProps {\n activeTab: AppTab;\n setActiveTab: (t: AppTab) => void;\n flowData: FlowData | null;\n incidents: Incident[];\n incidentsLoading: boolean;\n routes: Route[];\n selectedRoute: number;\n setSelectedRoute: (i: number) => void;\n destination: Coords | null;\n destName: string;\n setDestName: (s: string) => void;\n onGetRoutes: () => void;\n loading: boolean;\n simulated: boolean;\n userLocation: Coords | null;\n}\n\nexport default function Sidebar(props: SidebarProps) {\n const {\n activeTab, setActiveTab, flowData, incidents, incidentsLoading,\n routes, selectedRoute, setSelectedRoute,\n destination, destName, setDestName, onGetRoutes, loading, simulated, userLocation,\n } = props;\n\n return (\n

\n {([\"traffic\", \"routes\", \"incidents\"] as AppTab[]).map((tab) => (\n setActiveTab(tab)}\n >\n {tab === \"traffic\" ? \"🌊 Flow\" : tab === \"routes\" ? \"🗺️ Routes\" : \"🚨 Alerts\"}\n {tab === \"incidents\" && incidents.length > 0 && (\n \n {incidents.length}\n \n )}\n \n ))}\n

\n\n

\n {simulated && (\n

\n ℹ️\n Demo mode — data is simulated. Add a TOMTOM_API_KEY env var for live traffic.\n

\n )}\n\n {activeTab === \"traffic\" && }\n {activeTab === \"routes\" && (\n \n )}\n {activeTab === \"incidents\" && }\n

\n );\n}\n\n// ─── Traffic Flow Tab ─────────────────────────────────────────────────────────\nfunction TrafficTab({ flowData, userLocation }: { flowData: FlowData | null; userLocation: Coords | null }) {\n if (!flowData) {\n return (\n

🌊

Fetching live traffic flow…

\n );\n }\n\n const pct = Math.round((flowData.currentSpeed / flowData.freeFlowSpeed) * 100);\n const { label, cls } = getFlowStatus(pct);\n const barColor = pct >= 85 ? \"var(--green)\" : pct >= 65 ? \"var(--yellow)\" : pct >= 45 ? \"var(--orange)\" : \"var(--red)\";\n\n return (\n <>\n

\n 📡\n Current Location Traffic\n ● {label}\n

\n\n

Current Speed

{flowData.currentSpeed}

km/h

Free Flow

{flowData.freeFlowSpeed}

km/h

Travel Time

{Math.round(flowData.currentTravelTime / 60)}

min

Delay vs Normal

flowData.freeFlowTravelTime ? \"var(--orange)\" : \"var(--green)\" }}>\n +{Math.max(0, Math.round((flowData.currentTravelTime - flowData.freeFlowTravelTime) / 60))}\n

min extra

\n\n

\n Traffic flow vs free flow\n {pct}%\n

\n\n

\n 📊\n Road Status\n

\n \n 0.7} />\n flowData.freeFlowTravelTime ? `+${Math.round((flowData.currentTravelTime - flowData.freeFlowTravelTime) / 60)} min` : \"None\"} good={flowData.currentTravelTime <= flowData.freeFlowTravelTime} />\n

\n\n

\n 💡\n Traffic Tip\n

\n {pct < 45\n ? \"🔴 Heavy congestion detected! Consider taking an alternative route or delaying your trip by 20-30 minutes.\"\n : pct < 65\n ? \"🟠 Slow traffic ahead. Check the Routes tab for faster alternatives.\"\n : pct < 85\n ? \"🟡 Moderate traffic. Conditions are manageable — expect minor delays.\"\n : \"🟢 Roads are clear! Great time to travel.\"}\n

\n \n );\n}\n\nfunction StatusRow({ icon, label, value, good }: { icon: string; label: string; value: string; good: boolean }) {\n return (\n

\n {icon}{label}\n

\n {value}\n

\n );\n}\n\nfunction getFlowStatus(pct: number) {\n if (pct >= 85) return { label: \"Free Flow\", cls: \"green\" };\n if (pct >= 65) return { label: \"Moderate\", cls: \"yellow\" };\n if (pct >= 45) return { label: \"Slow\", cls: \"orange\" };\n return { label: \"Stop & Go\", cls: \"red\" };\n}\n\n// ─── Routes Tab ───────────────────────────────────────────────────────────────\nfunction RoutesTab({ routes, selectedRoute, setSelectedRoute, destination, destName, setDestName, onGetRoutes, loading, userLocation }: any) {\n return (\n <>\n

\n 🗺️\n Plan Your Route\n

\n \n {userLocation ? `${userLocation.lat.toFixed(4)}, ${userLocation.lon.toFixed(4)}` : \"Detecting location…\"}\n \n

↕

\n setDestName(e.target.value)}\n readOnly={!destination}\n />\n

\n \n {loading ? (\n \n Finding best routes…\n \n ) : \"🔍 Get Routes\"}\n \n

\n\n {routes.length === 0 && !loading && (\n

🗺️

Click anywhere on the map to set a destination, then tap Get Routes.

\n )}\n\n {routes.map((route: Route, idx: number) => {\n const mins = Math.round(route.summary.travelTimeInSeconds / 60);\n const km = (route.summary.lengthInMeters / 1000).toFixed(1);\n const delay = Math.round(route.summary.trafficDelayInSeconds / 60);\n const isBest = idx === 0 && delay <= (routes[1]?.summary?.trafficDelayInSeconds || 9999) / 60;\n return (\n setSelectedRoute(idx)}\n >\n

\n {route.label || `Route ${idx + 1}`}\n

\n {isBest && Best}\n {idx === selectedRoute && Selected}\n

\n {mins}\n min\n

\n {km}\n km\n

\n 5 ? \"var(--orange)\" : \"var(--green)\" }}>\n {delay > 0 ? `+${delay}` : \"0\"}\n \n min delay\n

\n {delay > 5\n ? ⚠️ Traffic delay of {delay} minutes on this route\n : ✅ Minimal traffic delay}\n

\n );\n })}\n \n );\n}\n\n// ─── Incidents Tab ────────────────────────────────────────────────────────────\nconst INCIDENT_ICONS: Record = {\n ACCIDENT: \"🚨\", JAM: \"🚗\", ROAD_WORK: \"🚧\", HAZARD: \"⚠️\",\n ROAD_CLOSURE: \"🚫\", DEFAULT: \"⚠️\",\n};\n\nfunction IncidentsTab({ incidents, loading }: { incidents: Incident[]; loading: boolean }) {\n if (loading) {\n return (\n

Scanning for incidents…

\n );\n }\n\n if (incidents.length === 0) {\n return (\n

✅

No incidents in view

Roads are clear in the visible area.

\n );\n }\n\n const sorted = [...incidents].sort((a, b) => b.severity - a.severity);\n\n return (\n <>\n

\n {incidents.length} active alert{incidents.length !== 1 ? \"s\" : \"\"} in view\n ● Live\n

\n {sorted.map((inc) => {\n const icon = INCIDENT_ICONS[inc.type] || INCIDENT_ICONS.DEFAULT;\n const cls = inc.severity >= 3 ? \"red\" : inc.severity === 2 ? \"orange\" : \"yellow\";\n const typeLabel = inc.type.replace(/_/g, \" \");\n return (\n

\n {icon}\n

{typeLabel}

{inc.description}

\n Severity {inc.severity}\n {inc.delay > 0 && +{inc.delay} min}\n

\n );\n })}\n \n );\n}\n",[],[135,201,194],"components","fbd9b4ac-34dd-11f1-9f69-42b51c65c3df","MapView.tsx","5a96a5ea-34d9-11f1-a30a-42b51c65c3df",15,["D",1775826344277],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport type { Coords, Incident, Route } from \"./App.tsx\";\n\ndeclare const L: any;\n\nconst INCIDENT_ICONS: Record = {\n ACCIDENT: \"🚨\", JAM: \"🚗\", ROAD_WORK: \"🚧\", HAZARD: \"⚠️\",\n ROAD_CLOSURE: \"🚫\", DEFAULT: \"⚠️\",\n};\n\ninterface MapViewProps {\n center: Coords;\n userLocation: Coords | null;\n incidents: Incident[];\n destination: Coords | null;\n routes: Route[];\n selectedRoute: number;\n onBoundsChange: (bounds: [number, number, number, number]) => void;\n onMapClick: (coords: Coords) => void;\n}\n\nexport default function MapView({\n center, userLocation, incidents, destination, routes, selectedRoute,\n onBoundsChange, onMapClick,\n}: MapViewProps) {\n const mapRef = useRef(null);\n const tileLayerRef = useRef(null);\n const userMarkerRef = useRef(null);\n const destMarkerRef = useRef(null);\n const incidentMarkersRef = useRef([]);\n const routeLayersRef = useRef([]);\n const mapDivRef = useRef(null);\n const boundsTimerRef = useRef(null);\n const onBoundsChangeRef = useRef(onBoundsChange);\n const onMapClickRef = useRef(onMapClick);\n\n // Keep refs up to date so initMap's stale closure always calls latest callbacks\n useEffect(() => { onBoundsChangeRef.current = onBoundsChange; }, [onBoundsChange]);\n useEffect(() => { onMapClickRef.current = onMapClick; }, [onMapClick]);\n\n // Load Leaflet script\n useEffect(() => {\n if ((window as any).L) { initMap(); return; }\n const s = document.createElement(\"script\");\n s.src = \"https://unpkg.com/leaflet@1.9.4/dist/leaflet.js\";\n s.onload = () => initMap();\n document.head.appendChild(s);\n }, []);\n\n const initMap = useCallback(() => {\n if (mapRef.current || !mapDivRef.current) return;\n\n const map = L.map(mapDivRef.current, {\n center: [center.lat, center.lon],\n zoom: 13,\n zoomControl: false,\n });\n\n // Dark map tiles (OpenStreetMap with dark styling via CartoDB)\n tileLayerRef.current = L.tileLayer(\n \"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png\",\n { attribution: '© OSM © CARTO', maxZoom: 19 }\n ).addTo(map);\n\n L.control.zoom({ position: \"bottomright\" }).addTo(map);\n\n map.on(\"moveend zoomend\", () => {\n clearTimeout(boundsTimerRef.current);\n boundsTimerRef.current = setTimeout(() => {\n const b = map.getBounds();\n onBoundsChangeRef.current([b.getWest(), b.getSouth(), b.getEast(), b.getNorth()]);\n }, 400);\n });\n\n map.on(\"click\", (e: any) => {\n onMapClickRef.current({ lat: e.latlng.lat, lon: e.latlng.lng });\n });\n\n // Initial bounds\n const b = map.getBounds();\n onBoundsChangeRef.current([b.getWest(), b.getSouth(), b.getEast(), b.getNorth()]);\n\n mapRef.current = map;\n }, []);\n\n // Pan to center changes\n useEffect(() => {\n if (mapRef.current) {\n mapRef.current.setView([center.lat, center.lon], mapRef.current.getZoom(), { animate: true });\n }\n }, [center]);\n\n // User location marker\n useEffect(() => {\n if (!mapRef.current || !userLocation) return;\n if (userMarkerRef.current) userMarkerRef.current.remove();\n\n const icon = L.divIcon({\n html: `

`,\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",[],[135,201,203],"ea6e0b96-34dd-11f1-a316-42b51c65c3df","App.tsx","487a9470-34d9-11f1-9c0b-42b51c65c3df",14,["D",1775826315048],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\nimport MapView from \"./MapView.tsx\";\nimport Sidebar from \"./Sidebar.tsx\";\n\nexport type Coords = { lat: number; lon: number };\nexport type Incident = {\n type: string; lat: number; lon: number;\n description: string; severity: number; delay: number;\n id?: string;\n};\nexport type Route = {\n summary: { lengthInMeters: number; travelTimeInSeconds: number; trafficDelayInSeconds: number; arrivalTime: string };\n label: string; delayMinutes: number; selected?: boolean;\n};\nexport type FlowData = {\n currentSpeed: number; freeFlowSpeed: number;\n currentTravelTime: number; freeFlowTravelTime: number;\n confidence: number; roadClosure: boolean;\n};\n\nexport type AppTab = \"traffic\" | \"routes\" | \"incidents\";\n\nexport default function App() {\n const [userLocation, setUserLocation] = useState(null);\n const [mapCenter, setMapCenter] = useState({ lat: 40.7128, lon: -74.006 }); // Default NYC\n const [incidents, setIncidents] = useState([]);\n const [flowData, setFlowData] = useState(null);\n const [routes, setRoutes] = useState([]);\n const [selectedRoute, setSelectedRoute] = useState(0);\n const [destination, setDestination] = useState(null);\n const [destName, setDestName] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [incidentsLoading, setIncidentsLoading] = useState(false);\n const [activeTab, setActiveTab] = useState(\"traffic\");\n const [toast, setToast] = useState(\"\");\n const [mapBounds, setMapBounds] = useState<[number, number, number, number] | null>(null);\n const [simulated, setSimulated] = useState(false);\n const refreshRef = useRef(null);\n\n const showToast = useCallback((msg: string) => {\n setToast(msg);\n setTimeout(() => setToast(\"\"), 3000);\n }, []);\n\n // Get user location\n useEffect(() => {\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(\n (pos) => {\n const loc = { lat: pos.coords.latitude, lon: pos.coords.longitude };\n setUserLocation(loc);\n setMapCenter(loc);\n fetchFlow(loc);\n },\n () => {\n showToast(\"📍 Location unavailable — using New York City as default\");\n fetchFlow({ lat: 40.7128, lon: -74.006 });\n },\n { enableHighAccuracy: true }\n );\n }\n }, []);\n\n // Auto-refresh incidents every 60s\n useEffect(() => {\n if (mapBounds) {\n fetchIncidents(mapBounds);\n refreshRef.current = setInterval(() => fetchIncidents(mapBounds), 60000);\n }\n return () => clearInterval(refreshRef.current);\n }, [mapBounds]);\n\n const fetchFlow = async (coords: Coords) => {\n try {\n const res = await fetch(`/api/flow?lat=${coords.lat}&lon=${coords.lon}`);\n const data = await res.json();\n if (data.flowSegmentData) {\n setFlowData(data.flowSegmentData);\n if (data.simulated) setSimulated(true);\n }\n } catch (e) { /* silent */ }\n };\n\n const fetchIncidents = async (bbox: [number, number, number, number]) => {\n setIncidentsLoading(true);\n try {\n const bboxStr = `${bbox[0]},${bbox[1]},${bbox[2]},${bbox[3]}`;\n const res = await fetch(`/api/incidents?bbox=${bboxStr}`);\n const data = await res.json();\n if (data.incidents) {\n setIncidents(data.incidents.map((inc: any, i: number) => ({ ...inc, id: `inc-${i}` })));\n if (data.simulated) setSimulated(true);\n }\n } catch (e) { /* silent */ } finally {\n setIncidentsLoading(false);\n }\n };\n\n const fetchRoutes = async () => {\n const origin = userLocation || mapCenter;\n if (!destination) { showToast(\"📍 Click the map to set a destination first\"); return; }\n setLoading(true);\n setActiveTab(\"routes\");\n try {\n const res = await fetch(\"/api/route\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ origin, destination }),\n });\n const data = await res.json();\n if (data.routes) {\n setRoutes(data.routes);\n setSelectedRoute(0);\n if (data.simulated) setSimulated(true);\n showToast(`🗺️ Found ${data.routes.length} routes — best option highlighted`);\n }\n } catch (e) {\n showToast(\"❌ Could not calculate routes\");\n } finally { setLoading(false); }\n };\n\n const handleMapBoundsChange = useCallback((bounds: [number, number, number, number]) => {\n setMapBounds(bounds);\n }, []);\n\n const handleMapClick = useCallback((coords: Coords) => {\n setDestination(coords);\n setDestName(`${coords.lat.toFixed(4)}, ${coords.lon.toFixed(4)}`);\n showToast(\"📌 Destination set — click 'Get Routes' to navigate\");\n }, [showToast]);\n\n const handleCenterOnUser = useCallback(() => {\n if (userLocation) {\n setMapCenter(userLocation);\n fetchFlow(userLocation);\n showToast(\"📍 Centered on your location\");\n } else {\n showToast(\"❌ Location not available\");\n }\n }, [userLocation, showToast]);\n\n return (\n

\n \n\n

\n \n

\n \n \n

\n\n {toast &&

{toast}

}\n

\n );\n}\n\nfunction TopBar({ onCenterUser, hasLocation }: { onCenterUser: () => void; hasLocation: boolean }) {\n return (\n

\n 🚦\n TrafficIQ\n

\n \n view source\n

\n );\n}\n\nfunction MapLegend() {\n return (\n

Traffic Flow

Free flow

Moderate

Slow

Stop & Go

Incidents

🚨 Accident

🚧 Road Works

⚠️ Hazard / Jam

\n );\n}\n",[],[135,201,211],"37b5765a-34d9-11f1-be1d-42b51c65c3df",8,["D",1775824297232],[154,155,156],[135,201],["D",1775824244104],[153,157,158,159],[135],["D",1775824062714],{"_16":17,"_83":79},{"_16":17,"_77":-5,"_78":79,"_33":34,"_80":81,"_82":26},{"_65":66,"_20":67,"_18":68,"_69":19,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":21,"_76":17},"ctx",{"_58":-5,"_104":263,"_264":265,"_266":267,"_268":26,"_269":26,"_270":26,"_271":38,"_272":-5,"_273":-7,"_274":-7,"_275":42,"_276":26,"_277":26,"_278":-5,"_279":26,"_280":26,"_281":26,"_282":-5},"ENV",{"_234":235,"_236":237,"_238":67,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search