Live-tracking the London Underground

How I made londonunderground.live

A couple of weeks ago I tweeted out a side project: londonunderground.live. It’s a 3D map of the tube with real-time animated trains.

londonunderground.live

I built this just for fun, but it ended up getting some traction online.

This post is about how I made it. 80% of the code was written by AI. I wouldn’t have started or completed this project without it.

Data

The London Underground has a live arrivals API. It basically lifts the predictions from the arrival boards at station platforms.

My job was to turn these predictions into a travel agenda per train. I set up a live pipeline to continuously pull updates from TfL, transform them into schedules, and expose them in a real-time API.

Setting this up and debugging it was the hardest part. Different lines spell the same station in different ways. Sometimes you’ll get Kings Cross, sometimes King’s Cross, and sometimes Kings Cross St. Pancras.

Additionally, trains often drop in and out of the API data.

AI was terrible at identifying these bugs, but fantastic at writing powerful debug tools.

Cursor wrote a 1D debug dashboard that allowed me to visually travel through time to track how train actions changed between API requests. This saved days.

In another case, I had to manually review and tweak the position of each tube station. In a few prompts, I got a custom webapp with keyboard shortcuts to blitz through them.

The end result shows decently accurate locations of trains. It does a good enough job at tracking positions when everything’s running smoothly, but it’s a lot less accurate when there are delays.

Dealing with volume

Spending a morning on hacker news drove quite a lot of traffic to the site. Within 24 hours, I had sent ~4 million map tile requests to Maptiler, which quickly started to get pricey.

I asked in a tweet if anyone would like to sponsor the site, and 15 minutes later, a hero stepped up :) Later on, Maptiler saw the site and jumped in to sponsor my future credits. They were really kind in helping me deal with the traffic.

Takeaways

• The bar to expressing creativity through technology is historically low, and virtually nobody has yet re-calibrated to what’s possible (myself included).

• But don’t let AI choose your stack :)) Cursor started by overlaying three.js with a separate mapping layer - syncing the 3D viewports was horrible and cost me several weeks. After I did 15 mins of research, I found that using deckGL would make everything 10x easier.

  

  Frontend v1 🤢

• People like trains way more than I realised.