Pinch, swipe, tap

An image of the live, digital Tube map in TfL Go

A live Tube map for London

In summer 2020, Transport for London launched a bold new approach to digital mapping — an adaptive, live Tube map — made entirely of code.

The map builds on Harry Beck’s original idea for a map of the London Underground system, which showed how journey connections are made across London, rather than being specifically geographical.

Since its creation in 1937, the map has undergone various design changes as it adapts to fit within a modern transport network. This has included adding more lines, more interchanges and more detail such as accessibility data as well as fare zones.

“The Beck map is instantly recognisable around the world and is one of the most important pieces of twentieth century communication design. Every change is scrutinised and debated by users and our job is to ensure that it can continue to perform its primary function of helping people get from A to B in as simple and direct way as possible.” Jon Hunter, Head of Design at Transport for London

Icon Transport for London roundel

“The Beck map is one of the most important pieces of twentieth century communication design.”

Launched during the height of the Covid-19 pandemic, the TfL Go app gives a live overview of the Tube, showing closed stations and disruptions at a glance — something that’s impossible with conventional mapping platforms.

An image of TfL Go, showing Oxford Circus and the live digital Tube map

As you pinch and swipe, the map responds to touch, allowing users to adapt the map quickly and transition between live travel information and map views such as showing what stations across London are step-free.

The potential of this new approach to digital mapping is therefore instantly clear — the map focuses on what’s important — a concise, live view of London.

An image of the zoomed out live digital Tube map

Less noise, more meaning

Showing transit lines and their connections — rather than a geographically accurate map — helps make sense of a complex city such as London.

Modular elements of the live digital Tube map
Modular live map elements

The map is made up of modular elements that can be rearranged in different useful patterns — for example lines or journeys — and most transit maps and wayfinding systems today, are based on this consistent, versatile, modern design language.

Nevertheless, the format has never seriously been adopted by digital platforms.

Previously, transit maps have been constrained by the sizes and dimensions of paper, far removed from a digital world, and largely built on geographic data.

With the release of TfL Go, we are closing the gap. “We need to keep rethinking how maps can adapt to new technologies and help us make sense of a constantly changing world — how maps can make cities inclusive, understandable and interesting to explore.” — Hanna Kops, Head of Experience, TfL Digital

Icon Transport for London roundel

“We need to keep rethinking how maps can adapt to new technologies and help us make sense of a constantly changing world”

Made up of code, the new map combines useful information — hidden across various versions of print maps and leaflets — with live data. This turns the Tube map into a modern and inclusive tool for all Londoners.

An image of the live digital Tube map switching to step-free mode
Switching to step-free mode

“From the beginning, it was clear that what is the norm in static map design would not be enough. Our new approach has made it possible, to engage with a real diverse set of Londoners, in defining what good design means for inclusive maps and how underlying data sets could be shaped. Inclusion has been a driving factor for innovation.” — Vanessa Uvoni, Design Lead, Inclusion

Icon Transport for London roundel

“Our new approach has made it possible, to engage with a diverse set of Londoners, in defining what good design means for inclusive maps”

A new tactile, adaptive mapping language

Most transit maps are still created manually by cartographers and often contain unique little quirks and workarounds.

With TfL Go – we have created everything in code and moved away from manually fine-tuned maps, without losing the details of craft.

“We’ve shaped a new digital wayfinding system that feels familiar and instantly recognisable. The well-loved design of the Beck map has been extended and adapted to respond to touch and live events.” — Alex Gray, Lead Product Designer

Icon Transport for London roundel

“We’ve shaped a new digital wayfinding system that feels familiar and instantly recognisable.”

Modular live digital Tube map elements
Modular live map elements

By adapting the existing map’s elements within printed maps and wayfinding signage, we have produced the building blocks for the new digital map.

The new map introduces carefully crafted digital behaviours — the ability to adapt to live data and to respond to touch.

Little details, like slightly moving labels or a light feedback on touch, turn the map into something tactile. Transitions between views are thoughtfully designed to not distort proportions. Live data flows in and out, highlighting disruptions in subtle ways and acting as one with the digital map rather than being an overlay or afterthought.

As in other digital maps, interacting with the map reveals additional layers of useful information — the names of Tube lines appear as you look closer at a station — only the main interchanges and airports show when looking at London as a whole.

An image of how we calculated curves for lines on the map

To ensure the design remains true to the Beck design, the code uses algorithms to generate curves at different angles and to keep the weight of lines consistent. This helps ensure the map doesn’t lose its iconic design.

“By drawing the Tube map with code, we can easily switch between live, data-driven versions of the map, such as the new step-free map, while keeping the essence of Harry Beck’s original idea. To show your location — the blue dot — we developed a new in-house iPad app that links geographical data points with the dynamically generated schematic map.” — Rowan Jones, Development Lead

Icon Transport for London roundel

“By drawing the Tube map with code, we can easily switch between live, data-driven versions of the map, such as the new step-free map, while keeping the essence of Harry Beck’s original idea.”

An image of showing live disruptions on Tube line segments and icons changing when zooming into the map
Line segments showing live status and lines adapting to zoom
An image showing how curves are calculated and then shown in the app
Calculating curves

As well as the map, the new design language is also used to illustrate the journey and line diagrams within TfL Go.

An image of journey routes using the same design language as used for the digital live Tube map
Journeys using the same design language as the live map

“The flexible, modular elements adjust and expand to reveal details that bring the live nature of the map to every planned journey, showing what’s happening in the moment. This is very useful for simplifying complex routes that otherwise can be easily overwhelming.” — Daniela Barbeira, Product Designer

Icon Transport for London roundel

“Modular elements adjust and expand bringing the live nature of the map to every planned journey.”

An image of an early live map prototype
An early prototype

We are now working on phase two of London’s live Tube map and there is more to come.

Download TfL Go to see the Live Tube map

Apple App Store

Google Play