Your Routes on a 3D Globe With Live VATSIM ATC
A WebGL globe with a great-circle arc, glowing airport markers, and pulsing rings when controllers are on duty right now. Same component drives three pages.
🌍 Where you'll see it
- Route detail —
/routes/<origin>/<destination>: a single arc, camera framed to the route - Routes landing —
/routes: the top 24 community-verified routes drawn as arcs across the planet - Search results: top 12 results from your current discovery, plotted above the list
What you get visually
A night-earth texture with city lights, a starfield background, and a soft brand-green atmospheric glow on the horizon. Each airport is a glowing marker with its ICAO floating just above. The great-circle path between the two airports renders as an animated dashed arc that climbs slightly off the surface and then settles back down at the destination. The camera frames the arc automatically — short hops zoom tight, transcontinental and trans-Pacific routes pull back to fit the whole geometry on screen.
Drag to orbit. Scroll to zoom. The globe also auto-rotates very slowly so the page feels alive when you're not interacting.
Live ATC overlay
The marker colours aren't decoration — they encode what VATSIM looks like at that airport right now:
- Bright green + pulsing ring — Tower, Approach, or Departure online. Full airport-relevant ATC.
- Blue — only Center / area control. Useful en-route, less so for the field itself.
- Amber — only Ground or Delivery. Pre-departure clearance staff, but no airborne service.
- Muted slate — VATSIM data was checked but nobody is on duty at this airport right now.
Hover over any marker and a tooltip lists the airport name and the exact positions online. The covered-airport markers are also slightly larger so they pop out on a busy globe.
ATC data refreshes every 60 seconds at the API level (with a 5-min in-memory cache against the VATSIM feed to keep load tiny). So a controller logging on shows up on the globe within ~1 minute of their first transmission.
How we kept it fast
The globe stack (three.js + react-globe.gl) is ~600KB. We dynamic-import it client-side only on pages that actually need it, with ssr: false, so the rest of the site never pays the cost. While the bundle downloads you see a placeholder; once it's ready the globe fades in.
Airport coordinates come from a small Postgres lookup that's cached aggressively (1-day fresh / 1-week stale-while-revalidate). Coordinates don't change. We're not hitting the database for them per request.
Marker deduplication means hub airports (EGLL, EDDF, KORD) appear once even if multiple routes touch them. On the popular-routes globe with 24 arcs, that's typically 30-40 markers instead of 48.
What it doesn't do (yet)
- Live aircraft positions. The arcs are static great-circle paths, not flight trackers. The marketing copy never claims live aircraft — that's what VATSIM Radar is for.
- Filed route lines. Real flights follow airways via named waypoints, so the actual ground track wanders off the great-circle. We draw the geometric shortest path. Adding the filed route is a future option.
- Weather radar overlay. METAR data factors into the scoring algorithm but doesn't paint precipitation on the globe.
We did an honest write-up elsewhere about what this is and isn't.