Zone One is a live map showing every tube train, bus, riverboat, train, and aircraft moving in real-time across central London. The result is a mesmerizing real-time portrait of London’s constantly shifting transportation network.
Instead of relying on heavy, off-the-shelf mapping platforms like Google Maps or Mapbox, the project is built from scratch as a high-performance 3D canvas using Three.js. The map’s structural geometry – including detailed 3D building extrusions, roads, and land-use zones – is rendered using open data from the Overture Maps Foundation and OpenStreetMap.
To bring this environment to life, the application pulls real-time transit telemetry directly from public feeds. Tube, bus, and riverboat locations, alongside live roadside JamCam images, are streamed via the Transport for London (TfL) Unified API. Meanwhile, mainline trains are tracked through National Rail data, and overhead aircraft are updated using ADS-B transponder feeds.
The finished map bears all the classic, tell-tale signs of being “vibe-coded.” There is absolutely nothing wrong with that, but only a machine would think that tiny gray text on a pitch-black background is somehow legible to human eyes. And while the neon-noir palette certainly contributes to the project’s slick, futuristic tone, I do wish vibe-coded map developers would occasionally vary their base-map styles. The world doesn’t always have to be rendered in black.
