TrafficIQ — Real-Time Traffic & Routes

\n \n\n\n","label",[151,64],"frontend","pulls","branches",1,"forks","envVars",{"_160":26,"_162":26},"connections",{"_160":26,"_161":26},"count","unfilledCount","emptyCount",{"_32":241,"_13":151,"_62":143,"_42":-5,"_34":35,"_144":242,"_145":84,"_36":243,"_38":26,"_65":238,"_147":-5,"_66":24,"_149":-5,"_180":244,"_17":245},{"_32":235,"_13":218,"_62":213,"_42":143,"_34":35,"_144":236,"_145":84,"_36":237,"_38":26,"_65":238,"_147":-5,"_66":24,"_149":-5,"_180":239,"_17":240},{"_32":227,"_13":228,"_62":229,"_42":213,"_34":35,"_144":230,"_145":84,"_36":231,"_38":154,"_65":21,"_147":232,"_66":24,"_149":-5,"_180":233,"_17":234},{"_32":219,"_13":220,"_62":221,"_42":213,"_34":35,"_144":222,"_145":84,"_36":223,"_38":154,"_65":21,"_147":224,"_66":24,"_149":-5,"_180":225,"_17":226},{"_32":210,"_13":211,"_62":212,"_42":213,"_34":35,"_144":107,"_145":84,"_36":214,"_38":154,"_65":21,"_147":215,"_66":24,"_149":-5,"_180":216,"_17":217},{"_32":142,"_13":64,"_62":63,"_42":143,"_34":35,"_144":39,"_145":84,"_36":207,"_38":26,"_65":21,"_147":148,"_66":24,"_149":-5,"_180":208,"_17":209},{"_32":199,"_13":200,"_62":201,"_42":143,"_34":35,"_144":202,"_145":84,"_36":203,"_38":154,"_65":21,"_147":204,"_66":24,"_149":-5,"_180":205,"_17":206},{"_32":191,"_13":192,"_62":193,"_42":143,"_34":35,"_144":194,"_145":84,"_36":195,"_38":26,"_65":21,"_147":196,"_66":24,"_149":-5,"_180":197,"_17":198},{"_32":183,"_13":184,"_62":185,"_42":-5,"_34":35,"_144":186,"_145":84,"_36":187,"_38":26,"_65":21,"_147":188,"_66":24,"_149":-5,"_180":189,"_17":190},{"_32":173,"_13":174,"_62":82,"_42":-5,"_34":35,"_144":175,"_145":84,"_36":176,"_38":177,"_65":178,"_147":179,"_66":24,"_149":-5,"_180":181,"_17":182},"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",[],[174],"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",[],[184],"344f9a4a-34d9-11f1-be1d-42b51c65c3df","style.css","344f9aea-34d9-11f1-be1d-42b51c65c3df",6,["D",1775824291529],"/* ─── Reset & Base ─────────────────────────────────── */\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --bg: #0f1117;\n --surface: #1a1d27;\n --surface2: #22263a;\n --accent: #3b82f6;\n --accent2: #06b6d4;\n --green: #22c55e;\n --yellow: #facc15;\n --orange: #f97316;\n --red: #ef4444;\n --text: #e2e8f0;\n --text-muted: #94a3b8;\n --border: #2d3353;\n --radius: 12px;\n --shadow: 0 4px 24px rgba(0,0,0,0.4);\n}\n\nhtml, body, #root { height: 100%; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); }\n\n/* ─── Layout ───────────────────────────────────────── */\n.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }\n\n.topbar {\n display: flex; align-items: center; gap: 12px;\n padding: 10px 16px;\n background: var(--surface);\n border-bottom: 1px solid var(--border);\n z-index: 1000; flex-shrink: 0;\n}\n\n.topbar .logo { display: flex; align-items: center; gap: 8px; }\n.topbar .logo-icon { font-size: 22px; }\n.topbar .logo-text { font-size: 18px; font-weight: 700; background: linear-gradient(135deg,#3b82f6,#06b6d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }\n\n.topbar .search-bar {\n flex: 1; max-width: 480px;\n display: flex; align-items: center; gap: 6px;\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: 8px; padding: 6px 12px;\n}\n.topbar .search-bar input {\n background: none; border: none; outline: none;\n color: var(--text); font-size: 13px; flex: 1;\n}\n.topbar .search-bar input::placeholder { color: var(--text-muted); }\n\n.topbar .btn {\n padding: 7px 16px; border-radius: 8px; border: none; cursor: pointer;\n font-size: 13px; font-weight: 600; transition: all 0.15s;\n}\n.btn-primary { background: var(--accent); color: #fff; }\n.btn-primary:hover { background: #2563eb; }\n.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }\n.btn-secondary:hover { background: var(--border); }\n.btn-sm { padding: 5px 11px; font-size: 12px; }\n\n.topbar .spacer { flex: 1; }\n.topbar .source-link { color: var(--text-muted); font-size: 12px; text-decoration: none; }\n.topbar .source-link:hover { color: var(--accent2); }\n\n/* ─── Main area ────────────────────────────────────── */\n.main { display: flex; flex: 1; overflow: hidden; }\n\n/* ─── Sidebar ──────────────────────────────────────── */\n.sidebar {\n width: 320px; flex-shrink: 0;\n background: var(--surface);\n border-right: 1px solid var(--border);\n display: flex; flex-direction: column;\n overflow: hidden; z-index: 500;\n}\n\n.sidebar-tabs {\n display: flex; border-bottom: 1px solid var(--border);\n flex-shrink: 0;\n}\n.tab-btn {\n flex: 1; padding: 10px 4px; background: none; border: none;\n color: var(--text-muted); font-size: 12px; font-weight: 600;\n cursor: pointer; transition: all 0.15s;\n border-bottom: 2px solid transparent;\n}\n.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }\n.tab-btn:hover:not(.active) { color: var(--text); background: var(--surface2); }\n\n.sidebar-content { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }\n\n/* ─── Cards ────────────────────────────────────────── */\n.card {\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: var(--radius); padding: 12px;\n}\n.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }\n.card-title { font-size: 13px; font-weight: 600; color: var(--text); }\n.card-icon { font-size: 16px; }\n\n/* ─── Status Badge ─────────────────────────────────── */\n.badge {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;\n}\n.badge-green { background: rgba(34,197,94,0.15); color: var(--green); }\n.badge-yellow { background: rgba(250,204,21,0.15); color: var(--yellow); }\n.badge-orange { background: rgba(249,115,22,0.15); color: var(--orange); }\n.badge-red { background: rgba(239,68,68,0.15); color: var(--red); }\n.badge-blue { background: rgba(59,130,246,0.15); color: var(--accent); }\n\n/* ─── Traffic Flow Card ────────────────────────────── */\n.flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.flow-item { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px 10px; }\n.flow-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }\n.flow-value { font-size: 18px; font-weight: 700; margin-top: 2px; }\n.flow-unit { font-size: 11px; color: var(--text-muted); }\n\n/* ─── Speed Bar ────────────────────────────────────── */\n.speed-bar-container { margin-top: 10px; }\n.speed-bar-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }\n.speed-bar-track { height: 6px; background: var(--border); border-radius: 10px; overflow: hidden; }\n.speed-bar-fill { height: 100%; border-radius: 10px; transition: width 0.6s ease; }\n\n/* ─── Incidents ────────────────────────────────────── */\n.incident-item {\n display: flex; gap: 10px; align-items: flex-start;\n padding: 10px; background: var(--surface2); border: 1px solid var(--border);\n border-radius: 10px; cursor: pointer; transition: border-color 0.15s;\n}\n.incident-item:hover { border-color: var(--accent); }\n.incident-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }\n.incident-body { flex: 1; min-width: 0; }\n.incident-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }\n.incident-desc { font-size: 12px; color: var(--text); margin: 2px 0; line-height: 1.4; }\n.incident-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }\n\n/* ─── Routes ───────────────────────────────────────── */\n.route-card {\n border: 2px solid var(--border); border-radius: var(--radius);\n padding: 12px; cursor: pointer; transition: all 0.15s;\n background: var(--surface2);\n}\n.route-card:hover { border-color: var(--accent); }\n.route-card.selected { border-color: var(--accent); background: rgba(59,130,246,0.08); }\n.route-card.best { border-color: var(--green); }\n.route-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }\n.route-name { font-size: 13px; font-weight: 700; }\n.route-stats { display: flex; gap: 12px; margin-top: 6px; }\n.route-stat { display: flex; flex-direction: column; }\n.route-stat-val { font-size: 16px; font-weight: 700; }\n.route-stat-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }\n.route-delay { display: flex; align-items: center; gap: 4px; font-size: 12px; }\n\n/* ─── Route form ───────────────────────────────────── */\n.route-form { display: flex; flex-direction: column; gap: 8px; }\n.route-input-group { position: relative; }\n.route-input-group .dot {\n position: absolute; left: 10px; top: 50%; transform: translateY(-50%);\n width: 10px; height: 10px; border-radius: 50%;\n}\n.dot-origin { background: var(--accent); }\n.dot-dest { background: var(--red); }\n.route-input-group input {\n width: 100%; background: var(--surface2); border: 1px solid var(--border);\n border-radius: 8px; padding: 8px 12px 8px 28px; color: var(--text);\n font-size: 13px; outline: none; transition: border-color 0.15s;\n}\n.route-input-group input:focus { border-color: var(--accent); }\n.route-input-group input::placeholder { color: var(--text-muted); }\n\n/* ─── Location pill ────────────────────────────────── */\n.location-pill {\n display: flex; align-items: center; gap: 6px;\n background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3);\n border-radius: 20px; padding: 4px 10px; font-size: 12px;\n}\n.location-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: pulse 2s infinite; }\n@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }\n\n/* ─── Map ──────────────────────────────────────────── */\n.map-wrapper { flex: 1; position: relative; }\n#map { width: 100%; height: 100%; background: #1a1a2e; }\n\n/* Map overlays */\n.map-fab {\n position: absolute; z-index: 1000;\n background: var(--surface); border: 1px solid var(--border);\n border-radius: 10px; padding: 8px 12px;\n display: flex; align-items: center; gap: 6px;\n font-size: 12px; cursor: pointer; box-shadow: var(--shadow);\n transition: all 0.15s;\n}\n.map-fab:hover { background: var(--surface2); }\n.map-fab-tl { top: 12px; left: 12px; }\n.map-fab-tr { top: 12px; right: 12px; }\n.map-fab-bl { bottom: 40px; left: 12px; }\n\n.map-legend {\n position: absolute; bottom: 40px; right: 12px; z-index: 1000;\n background: var(--surface); border: 1px solid var(--border);\n border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow);\n min-width: 130px;\n}\n.legend-title { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }\n.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; margin: 3px 0; }\n.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }\n\n/* ─── Loader ───────────────────────────────────────── */\n.loader { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }\n@keyframes spin { to { transform: rotate(360deg); } }\n\n/* ─── Scrollbar ────────────────────────────────────── */\n::-webkit-scrollbar { width: 4px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }\n\n/* ─── Notification toast ───────────────────────────── */\n.toast {\n position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);\n background: var(--surface2); border: 1px solid var(--accent);\n border-radius: 10px; padding: 10px 18px;\n font-size: 13px; font-weight: 500; z-index: 9999;\n box-shadow: 0 4px 20px rgba(59,130,246,0.3);\n animation: toastIn 0.3s ease;\n}\n@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }\n\n/* ─── Info banner ──────────────────────────────────── */\n.info-banner {\n background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.25);\n border-radius: 8px; padding: 8px 12px; font-size: 11px; color: var(--accent2);\n display: flex; gap: 6px; align-items: flex-start;\n}\n\n/* ─── Responsive ───────────────────────────────────── */\n@media (max-width: 640px) {\n .sidebar { width: 100%; max-height: 45vh; border-right: none; border-top: 1px solid var(--border); order: 2; }\n .main { flex-direction: column; }\n .map-wrapper { order: 1; flex: 1; }\n}\n",[],[151,192],"dbbc18a4-34dd-11f1-8ff9-42b51c65c3df","index.tsx","369163ce-34d9-11f1-be1f-42b51c65c3df",13,["D",1775826290396],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n",[],[151,200],["D",1775824250317],[],[151,64],"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",[],[151,218,211],"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",[],[151,218,220],"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",[],[151,218,228],"37b5765a-34d9-11f1-be1d-42b51c65c3df",8,["D",1775824297232],"directory",[165,166,167],[151,218],"180adc8c-34d9-11f1-99b5-42b51c65c3df",4,["D",1775824244104],[164,168,169,170],[151],["D",1775824062714],{"_11":12,"_120":69},{"_11":12,"_116":-5,"_68":69,"_30":67,"_117":118,"_119":24},{"_38":107,"_13":16,"_32":35,"_108":71,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":14,"_115":12},"ctx",{"_52":-5,"_139":283,"_284":285,"_286":287,"_288":24,"_289":24,"_290":24,"_291":84,"_292":-5,"_293":-7,"_294":-7,"_295":26,"_296":24,"_297":24,"_298":-5,"_299":24,"_300":24,"_301":24,"_302":-5},"ENV",{"_254":255,"_256":257,"_258":16,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282},"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 · index.html