TrafficIQ — Real-Time Traffic & Routes

\n \n\n\n",[18,69],"37b5765a-34d9-11f1-be1d-42b51c65c3df",["D",1775824297232],[18,101],"pulls","branches","forks","envVars",{"_219":26,"_221":26},"connections",{"_219":26,"_220":26},"count","unfilledCount","emptyCount",{"_37":184,"_13":18,"_67":112,"_47":-5,"_39":40,"_185":186,"_187":24,"_41":285,"_43":26,"_70":102,"_189":-5,"_71":30,"_190":-5,"_239":286,"_17":287},{"_37":209,"_13":101,"_67":100,"_47":112,"_39":40,"_185":95,"_187":24,"_41":282,"_43":26,"_70":102,"_189":-5,"_71":30,"_190":-5,"_239":283,"_17":284},{"_37":274,"_13":275,"_67":276,"_47":100,"_39":40,"_185":277,"_187":24,"_41":278,"_43":202,"_70":21,"_189":279,"_71":30,"_190":-5,"_239":280,"_17":281},{"_37":266,"_13":267,"_67":268,"_47":100,"_39":40,"_185":269,"_187":24,"_41":270,"_43":202,"_70":21,"_189":271,"_71":30,"_190":-5,"_239":272,"_17":273},{"_37":259,"_13":260,"_67":261,"_47":100,"_39":40,"_185":149,"_187":24,"_41":262,"_43":202,"_70":21,"_189":263,"_71":30,"_190":-5,"_239":264,"_17":265},{"_37":205,"_13":69,"_67":68,"_47":112,"_39":40,"_185":44,"_187":24,"_41":256,"_43":26,"_70":21,"_189":207,"_71":30,"_190":-5,"_239":257,"_17":258},{"_37":200,"_13":92,"_67":91,"_47":112,"_39":40,"_185":105,"_187":24,"_41":253,"_43":202,"_70":21,"_189":203,"_71":30,"_190":-5,"_239":254,"_17":255},{"_37":196,"_13":83,"_67":82,"_47":112,"_39":40,"_185":77,"_187":24,"_41":250,"_43":26,"_70":21,"_189":198,"_71":30,"_190":-5,"_239":251,"_17":252},{"_37":242,"_13":243,"_67":244,"_47":-5,"_39":40,"_185":245,"_187":24,"_41":246,"_43":26,"_70":21,"_189":247,"_71":30,"_190":-5,"_239":248,"_17":249},{"_37":232,"_13":233,"_67":125,"_47":-5,"_39":40,"_185":234,"_187":24,"_41":235,"_43":236,"_70":237,"_189":238,"_71":30,"_190":-5,"_239":240,"_17":241},"17c9b3f6-34d9-11f1-ac14-42b51c65c3df","main.ts",3,["D",1775824243673],2,"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve frontend\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\", import.meta.url));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Source route\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ─── Traffic API Proxy ───────────────────────────────────────────────────────\n// TomTom free tier key provided by user via env, or fallback to demo\nconst TOMTOM_KEY = Deno.env.get(\"TOMTOM_API_KEY\") || \"\";\n\n// Flow segment data – real-time speed for a lat/lon point\napp.get(\"/api/flow\", async (c) => {\n const lat = c.req.query(\"lat\");\n const lon = c.req.query(\"lon\");\n if (!lat || !lon) return c.json({ error: \"lat/lon required\" }, 400);\n\n if (!TOMTOM_KEY) {\n // Return simulated data if no API key\n return c.json(simulateFlow(parseFloat(lat), parseFloat(lon)));\n }\n\n const url =\n `https://api.tomtom.com/traffic/services/4/flowSegmentData/absolute/10/json?point=${lat},${lon}&key=${TOMTOM_KEY}`;\n try {\n const res = await fetch(url);\n const data = await res.json();\n return c.json(data);\n } catch (e) {\n return c.json({ error: \"Traffic API error\" }, 500);\n }\n});\n\n// Traffic incidents in a bounding box\napp.get(\"/api/incidents\", async (c) => {\n const bbox = c.req.query(\"bbox\"); // minLon,minLat,maxLon,maxLat\n if (!bbox) return c.json({ error: \"bbox required\" }, 400);\n\n if (!TOMTOM_KEY) {\n return c.json(simulateIncidents(bbox));\n }\n\n const [minLon, minLat, maxLon, maxLat] = bbox.split(\",\");\n const url =\n `https://api.tomtom.com/traffic/services/5/incidentDetails?bbox=${minLon},${minLat},${maxLon},${maxLat}&fields={incidents{type,geometry{type,coordinates},properties{iconCategory,magnitudeOfDelay,events{description,code,iconCategory},startTime,endTime,from,to,length,delay,roadNumbers,timeValidity}}}&language=en-GB&key=${TOMTOM_KEY}`;\n try {\n const res = await fetch(url);\n const data = await res.json();\n return c.json(data);\n } catch (e) {\n return c.json({ error: \"Incidents API error\" }, 500);\n }\n});\n\n// Route calculation with traffic\napp.post(\"/api/route\", async (c) => {\n const body = await c.req.json();\n const { origin, destination } = body;\n if (!origin || !destination) return c.json({ error: \"origin/destination required\" }, 400);\n\n if (!TOMTOM_KEY) {\n return c.json(simulateRoute(origin, destination));\n }\n\n const locations = `${origin.lat},${origin.lon}:${destination.lat},${destination.lon}`;\n const url =\n `https://api.tomtom.com/routing/1/calculateRoute/${locations}/json?traffic=true&travelMode=car&routeType=fastest&key=${TOMTOM_KEY}`;\n try {\n const res = await fetch(url);\n const data = await res.json();\n return c.json(data);\n } catch (e) {\n return c.json({ error: \"Routing API error\" }, 500);\n }\n});\n\n// ─── Simulation helpers (used when no API key) ───────────────────────────────\nfunction simulateFlow(lat: number, lon: number) {\n const currentSpeed = Math.floor(20 + Math.random() * 80);\n const freeFlowSpeed = 90;\n return {\n flowSegmentData: {\n currentSpeed,\n freeFlowSpeed,\n currentTravelTime: Math.floor(60 + Math.random() * 120),\n freeFlowTravelTime: 45,\n confidence: 0.95,\n roadClosure: false,\n },\n simulated: true,\n };\n}\n\nfunction simulateIncidents(bbox: string) {\n const [minLon, minLat, maxLon, maxLat] = bbox.split(\",\").map(parseFloat);\n const incidents = [];\n const types = [\"ACCIDENT\", \"JAM\", \"ROAD_WORK\", \"HAZARD\", \"ROAD_CLOSURE\"];\n const descriptions = [\n \"Multi-vehicle collision blocking right lane\",\n \"Heavy congestion, expect 20min delay\",\n \"Road works — lane closed ahead\",\n \"Debris on road — caution advised\",\n \"Road closed for emergency repairs\",\n \"Accident cleared, residual delays\",\n \"Slow traffic due to broken-down vehicle\",\n \"Traffic lights out, police directing\",\n ];\n const count = Math.floor(2 + Math.random() * 5);\n for (let i = 0; i < count; i++) {\n const lat = minLat + Math.random() * (maxLat - minLat);\n const lon = minLon + Math.random() * (maxLon - minLon);\n const type = types[Math.floor(Math.random() * types.length)];\n incidents.push({\n type,\n lat,\n lon,\n description: descriptions[Math.floor(Math.random() * descriptions.length)],\n severity: Math.floor(1 + Math.random() * 4),\n delay: Math.floor(Math.random() * 30),\n });\n }\n return { incidents, simulated: true };\n}\n\nfunction simulateRoute(origin: any, destination: any) {\n return {\n routes: [\n {\n summary: {\n lengthInMeters: 12500,\n travelTimeInSeconds: 1320,\n trafficDelayInSeconds: 240,\n departureTime: new Date().toISOString(),\n arrivalTime: new Date(Date.now() + 1320 * 1000).toISOString(),\n },\n legs: [{ points: [] }],\n label: \"Fastest route\",\n delayMinutes: 4,\n },\n {\n summary: {\n lengthInMeters: 15800,\n travelTimeInSeconds: 1080,\n trafficDelayInSeconds: 60,\n departureTime: new Date().toISOString(),\n arrivalTime: new Date(Date.now() + 1080 * 1000).toISOString(),\n },\n legs: [{ points: [] }],\n label: \"Alternative via bypass\",\n delayMinutes: 1,\n },\n ],\n simulated: true,\n };\n}\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","children",[],[233],"80aef890-34d9-11f1-8e1f-42b51c65c3df","README.md","80aef944-34d9-11f1-8e1f-42b51c65c3df",12,["D",1775824419662],"# 🚦 TrafficIQ — Real-Time Traffic & Route Planning\n\nA full-featured traffic monitoring app with live incident alerts, flow data, and intelligent route suggestions.\n\n## Features\n\n- 📡 **Real-time traffic flow** — current speed vs free-flow speed with visual indicators\n- 🚨 **Live incident alerts** — accidents, road works, hazards, closures on the map\n- 🗺️ **Smart route planning** — multiple routes with delay comparisons, auto-selects best\n- 📍 **GPS location** — auto-detects your position and centers the map\n- 🌙 **Dark mode map** — high-contrast dark map with color-coded traffic layers\n- 🔄 **Auto-refresh** — incidents update every 60 seconds\n\n## Architecture\n\n```mermaid\ngraph TD\n A[Browser / React SPA] -->|HTTP requests| B[Hono Backend - main.ts]\n B -->|/api/flow| C[TomTom Traffic Flow API]\n B -->|/api/incidents| D[TomTom Traffic Incidents API]\n B -->|/api/route| E[TomTom Routing API]\n B -->|Simulated data| F[Demo Mode fallback]\n A -->|Map tiles| G[CartoDB Dark Tiles via Leaflet]\n```\n\n## Files\n\n| File | Purpose |\n|------|---------|\n| `main.ts` | Hono server — API proxy + simulation fallback |\n| `frontend/index.html` | App shell, loads Leaflet + React |\n| `frontend/style.css` | Dark UI design system |\n| `frontend/index.tsx` | React entry point |\n| `frontend/components/App.tsx` | Root component, state management, data fetching |\n| `frontend/components/MapView.tsx` | Leaflet map — markers, routes, incident overlays |\n| `frontend/components/Sidebar.tsx` | Traffic Flow / Routes / Incidents panel |\n\n## Setup (for live traffic data)\n\n1. Register for a **free TomTom API key** at [developer.tomtom.com](https://developer.tomtom.com)\n2. Add it as an environment variable in this val:\n - Key: `TOMTOM_API_KEY`\n - Value: your key\n\nWithout the key the app runs in **Demo Mode** with realistic simulated data.\n\n## Color Legend\n\n| Color | Meaning |\n|-------|---------|\n| 🟢 Green | Free flow (≥85% speed) |\n| 🟡 Yellow | Moderate (65–85%) |\n| 🟠 Orange | Slow (45–65%) |\n| 🔴 Red | Stop & Go (<45%) |\n",[],[243],["D",1775824291529],[],[18,83],["D",1775826290396],[],[18,92],["D",1775824250317],[],[18,69],"13678cc0-34de-11f1-9ff8-42b51c65c3df","Sidebar.tsx","7811a2fa-34d9-11f1-9c0b-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",[],[18,101,260],"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",[],[18,101,267],"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",[],[18,101,275],["D",1775824297232],[224,225,226],[18,101],["D",1775824244104],[223,227,228,229],[18],["D",1775824062714],{"_11":12,"_162":74},{"_11":12,"_158":-5,"_73":74,"_31":72,"_159":160,"_161":30},{"_43":149,"_13":16,"_37":40,"_150":114,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":14,"_157":12},"ctx",{"_57":-5,"_181":325,"_326":327,"_328":329,"_330":30,"_331":30,"_332":30,"_333":24,"_334":-5,"_335":-7,"_336":-7,"_337":26,"_338":30,"_339":30,"_340":-5,"_341":30,"_342":30,"_343":30,"_344":-5},"ENV",{"_296":297,"_298":299,"_300":16,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324},"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"]

History · frontend