Mind the gap

Hi, it’s Andy, tldraw Product Developer here.

Recently I was looking for web equivalent of the TfL Go app, but it turns out there isn’t really one. So, I built my own on the canvas.

I knew I wanted a geographically accurate mode and live train times and positions. TfL doesn’t have that data publicly available - because they don’t actually know it themselves. Most of the Tube network relies on "track circuits", which can tell you which (approx. 300m) segments of the railways are occupied. From that, TfL can predict arrival times, but there's no dot they can hand you that says "this train is here, right now."

The core problem was converting scheduled arrival times into something that looks like a moving train. The simplest version of this is linear interpolation: if a train is due at station A at 10:00 and station B at 10:03, assume it's x% of the way along the track once x% of that time has elapsed. That's the baseline the rest of the map is built on.

To make it seem as though the map is showing live locations, I built a smoothing function so the trains run along the track in more realistic way. Trains take time to accelerate as they leave stations and decelerate as they approach stations, so I had to factor that in. If a train has only just departed or almost arrived, I assumed it’s closer to the station than the linear interpolation suggests.

I also added Eventual Consistency. If a train position prediction was inaccurate (e.g. due to a delay), immediately jumping a train to the new predicted position is jarring. Instead, gradually reduce the error margin such that the UI smoothly “catches up” to the latest prediction data without the user noticing.

It’s all about the lines

On top of the ‘live’ locations, I wanted to be able to play around with the tube map, to arrange my own London transport map. The canvas’s native shapes make it a great environment for building malleable tracks that can be dragged around the board. tldraw already handles node dragging, connecting, and snapping to the canvas out of the box, so the interaction logic already existed.

One challenging detail was implementing overground lines with their white inner lines, as they have complex masking at intersections. Another fun challenge was implementing a morph animation when switching between the schematic map and the geographic view, so it feels more like a native app, not a webpage reloading.

The layout of the London Underground is famously complex. To build the editable map, I used Octolinear line drawing - inspired by Harry Beck’s tube map design, the connections between stations are drawn with line segments at 45deg angle increments. This is currently procedurally derived from station positions but I plan to make this customisable/editable in future.

Reading between the lines

Real-world geographic and transit data is genuinely horrible to work with. The map currently pulls polylines for each line's real-world path from the Overpass API, which queries OpenStreetMap - think Wikipedia for map data, crowdsourced and about as tidy as that implies. Cleaning it up into something usable took longer than building the animation logic on top of it.

Along the way, I also ended up with a basic tube map editing UI, originally built as an internal dev tool for laying out stations and lines by hand. It turned out to be genuinely fun to use, and there isn't a good general-purpose tube map editor out there already - so that's likely to become its own thing.

And sometimes the most reliable way to check a data source is the old-fashioned way: go and look. My colleague Max was on hand for that part.