RoadTracker India
roadtrackerindia.com — a map-first encyclopedia of Indian roads.
National Highways, Expressways, State Highways and notable city roads on one fast,
fully static, interactive map. The map is the interface: search or tap a road,
the camera flies to it, the route draws itself, and an encyclopedia panel slides in.
Features
- 🗺 Map-first UI — full-screen MapLibre GL map, category-coloured network
(Expressway / NH / SH / city), dashed = under construction or planned, legend, hover tooltips
- 🔎 Search — understands road numbers ("NH 44"), names ("Yamuna Expressway"),
old numbering ("old NH 7"), and cities ("roads through Nagpur"); keyboard-navigable
- 🧭 Find my road — one tap, browser GPS, snaps to the nearest catalogued road
with graceful fallbacks (permission denied → search; nothing nearby → closest options)
- 📖 Road panel — progressive disclosure: summary chips first, then route, lanes,
agency, cost, contractor, toll plazas, timeline, history, facts, official sources
- 🕳 Community reports — anyone can pin potholes / damaged stretches / waterlogging
on a road, and anyone can remove a pin once the problem is fixed (stale reports
otherwise outlive the pothole). Deletes are soft, so they're recoverable
- ⭐ Road ratings — 1–5 stars from the one row of stars in the panel, with the
community average and how many people gave it
- 🛣 Stretch reviews — a long road is cut at its main stops, so you rate the part
you drove ("Delhi → Agra", or several stretches in a row), not all 3,745 km of
NH 44 at once — and the way you drove it: the ⇄ beside the stars turns it into
"Agra → Delhi", the other carriageway. Each stretch is coloured by its score
on the map and on a bar in the panel, for the way you are looking at the road
(arrows on the map say which) — the two sides are never averaged together;
tap one to see how it rates and what people said about it. Short
roads, and the few whose map line is too rough to cut, keep one rating for the
whole road
- 💬 Road reviews — a few optional words to go with the stars, one per person per
stretch (or run of stretches), with a "helpful" thumb; the most-liked reviews
surface first. They live inside the same Firestore document as the score, so
showing them costs no extra read
- 🔒 No user tracking — no account, no anonymous sign-in, no stored identity.
One-rating-per-stretch is enforced by a salted server-side hash of (coarse IP +
device fingerprint); raw values are never stored, and your own stars live only
in your browser. See docs/FIREBASE.md
- ☁️ Firestore behind a serverless API —
/api/ratings and /api/reports hold
the Admin credentials, so firestore.rules denies all direct browser access and
there is no Firebase SDK in the bundle
- 🌗 Light & dark map styles with a toggle (dark style is derived programmatically)
- 🔗 SEO & deep links — all 7,757 roads get a real static page at
/road/<id> that
carries the road's text, its meta tags and JSON-LD before any JavaScript runs, plus
state and company directories and a sitemap index over the lot
- ♿ Accessible — keyboard navigation, ARIA combobox/dialog patterns, visible focus,
prefers-reduced-motion disables every animation
- 📉 Edge states — tile-CDN failure banner with retry (roads still render on a plain
background), sparse-data placeholders, offline-tolerant boot
Quick start
npm install
npm run dev # validate data + dev server on :5173
npm run build # data build → vite build → static pages + sitemaps
npm run preview # serve the production build
Deploy the dist/ folder to any static host (Netlify, Vercel, Cloudflare Pages,
GitHub Pages). Details: docs/DEPLOY.md.
How the data works
Each road is one JSON file — the single source of truth:
public/data/roads/<id>.json ← encyclopedia entry + waypoints
data/geometry/<id>.json ← the road's real alignment (encoded polyline)
npm run data (runs automatically before dev/build) validates every file against
docs/DATA.md and derives everything the app loads:
public/data/index.json search/browse index
public/data/network-lite.geojson trunk network — expressways + NHs, loaded at startup
public/data/network-detail.geojson state + district roads, loaded on zoom-in
public/data/shapes/<id>.json per-road display geometry (lazy-loaded)
Add a road = drop one JSON file in public/data/roads/ and rebuild. That's it —
it appears on the map, in search, in browse, and gets its own SEO page.
The corpus
The catalogue covers every numbered road OpenStreetMap has mapped in India —
national highways, national expressways, state highways, and district roads —
generated by a four-stage pipeline and then enriched by hand:
node scripts/fetch-osm-reference.mjs # state polygons + place names
node scripts/fetch-osm-roads.mjs # every route relation + its alignment
node scripts/generate-roads.mjs # → road files, skipping anything hand-written
node scripts/fill-gaps.mjs # close the holes between OSM's pieces, or leave them undrawn
Every stage is throttled, cached and resumable — stop any of them and re-run to
continue. Generated roads are marked "provenance": "osm" and carry route,
length, states and towns; history, tolls and the organisations behind them are
written by hand on top, and the generator never touches a road once that starts.
Full details in docs/CORPUS.md.
(Data © OpenStreetMap contributors, ODbL.)
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
