The design of Trainmap v2

12basemaps: nine drawn by us from open map data, three from NASA imagery

13typefaces and weights, made into map fonts

1,224lakes named in their own language

0third-party map services: tiles, fonts and terrain are ours

1preview image drawn for every map someone shares

01Principles

Three ideas,
held everywhere.

Every decision in v2 goes back to one of these. When two choices compete, the one that keeps the journey in front wins.

The journey leads

The route is the subject. The map gives it a place and steps back: soft land, quiet roads, names that make room. Routes now run under place names, never through them.

Glass
~~over bright maps~~

Weekend in Paris

Paper, not glass

The old see-through panel turned orange over Sverige 1931 and yellow over Signal. The new one is an opaque sheet of warm paper with a fine grain. It feels like a real object, and it reads the same over every map.

ZürichClean

Every map its own voice

Web maps usually wear one typeface. Ours don't: each basemap sets the names in the lettering of the maps it comes from, from Inter to Art Deco capitals. The labels belong to the style, not bolted onto it.

02The collection

Twelve maps,
four moods.

Everyday maps for planning, elevation maps for mountain journeys, Classic maps redrawn from railway posters of the 1920s and 30s, and three from space: the season, the lights at night and the sky as it is now. Try the zoom levels on each one.

Live · the Glacier Express

Draw the route above the names (old)

Drag, scroll and tilt: it's the real map

03Typography

A voice
for every map.

Each style sets six kinds of name — country, capital, city, town, lake, sea — in its own face, case, spacing and ink. Every one uses the same hierarchy, so you can read any of them at a glance.

The app's own two voices

Weekend in Paris

Source Serif 4 · titles, route names, headings

London → Paris 490 km · 2 h 16

Inter · the instrument: controls, distances, search

One scale for everything in the panel

14 pxDraw route · inputs and buttons

13.5 pxZermatt → St. Moritz, the routes you've drawn

12 pxSecondary text, labels, chips and tables

11 pxCredits · Map data © OpenStreetMap contributors

04Colour

Paper, ink
and a line of its own.

The panel uses warm inks instead of greys. On the paper maps, routes are claret, then a muted sequence. Every other map draws its routes its own way: rose on Dark, black with white beads on LMS 1925, vermilion on Sverige 1931.

Paperrgba(250,247,240,.8)

Ink#2b2620

Soft ink#6f675c

Faint ink#9a9184

Claret#990f3d

Night#191816

Route colours on the paper maps (Clean, Detailed, Relief), in the order routes are added

Each basemap's land, water and label ink, read from its live style file.

Every map, its own line

The route is drawn the way each map would have drawn it: claret on the paper maps, rose where claret would vanish on Dark, and the lines of the posters on the Classic three, and a dark edge over the imagery of the three from space, with stop markers to match. Share images carry the same line.

05Layering

Routes run
under the names.

A map is a stack. v2 slides the route in between the land and the lettering, so "Lille" sits on the line instead of being struck through by it. It stays in place when you switch basemaps and while a route is still drawing.

Basemap Your route Names

Land, water, reliefThe basemap, drawn from our own vector tiles and terrain.
Your routesInserted just below the style's first label layer, and carried across every style switch.
Names and markersThe style's own typography on top, so a route never crosses out a name.

Clean basemap over the Italian lakes: Lago Maggiore, Lago di Lugano and Lago di Como, with the Milan to Zurich line passing under the names

Local names, in their own scripts

Lakes, the way locals write them

Le Léman
Bodensee
Lago Maggiore
Vierwaldstättersee
Balaton
Mälaren
Saimaa
Mjøsa
Loch Ness
Śniardwy
Охридско Езеро
Λίμνη Τριχωνίδα

1,224 lakes, ranked by size so the big ones appear first as you zoom in. 868 of them need letters beyond plain English A–Z.

06The panel

Ordered by
what you want to do.

Make a route, choose the look, share it, explore. There's one filled button, map styles are picked by seeing them, and Share stays within reach.

Trainmap v2 on desktop, Clean basemap, London to Paris

1 2 3 4 5

1TitleOne title, edited in place. The collapse arrow sits beside it.

2RoutesWhat you've made, with distance and time. It only appears once a route exists.

3Add a routeThe panel's only filled button. "Add a stop" is a plain link.

4Map styleTwelve small previews in four groups instead of twelve words.

5Share · New mapPinned to the foot of the panel, always in reach.

Milan to Zurich on Rhein 1928, phone — Rheingold · Milan → Zurich

The app's first screen on a phone — First visit · the map comes first

London to Edinburgh on LMS 1925, phone — LMS 1925 · London → Edinburgh

Close-up of the panel over the Sverige 1931 map

The material

A sheet of paper, lit from above

An opaque paper panel with a faint grain, a hairline edge and a soft shadow. Over SJ's orange and Signal's yellow it stays the same colour. The Classic maps show through only at the rounded edge.

Surface: rgba(250, 247, 240, 0.8) · 18 px blur
Grain: fractal noise, multiplied, barely there
Radius: 22 px panel · 8 px fields and buttons
Edge: 1 px of white at 60%

07Moving around

One app,
not pages.

Open an iconic route and nothing reloads. The panel changes in place and the map glides from wherever it was to the route. Back and forward work as you'd expect, and your own map waits for you.

Your own map: London to Paris, titled Weekend in Paris — **Your map**Weekend in Paris

The panel has become the Glacier Express page; the map begins to move — **0.7 s**You tap Glacier Express: the panel changes in place

The map glides across France towards the Alps — **1.4 s**The map glides towards the Alps

The Glacier Express drawn in the Alps, with the way back to your map in the panel — **3.6 s**The route draws itself. "Back to your map" waits in the panel

Your maps, kept

Nothing you make is lost

Saved as you go. Every change saves your map in this browser: its title, stations and style. It's never sent anywhere.
Pick up where you left off. Come back to Trainmap and your latest map is waiting, one tap to continue. Your last five are listed under "Your maps".
New map is undoable. Starting afresh clears the map in place with a quiet "Undo", and the old map stays in your list.
A friend's map stays theirs. A shared map is saved only once you change it, as your own copy.

The panel offering to continue Weekend in Paris, one route, just now

After New map: an empty map, the old one listed under Your maps, and a small Map cleared, Undo note — New map: the old one listed under "Your maps", and a small "Map cleared · Undo" at the foot

08The intro

A slow train,
quietly.

Before you draw anything, a train wanders Europe on the home page. Each leg starts where the last one ended. When it reaches a town, the map's own name for it eases into the route's colour while it waits, and back as it leaves.

Clean: Lisbon, the map's own label, in claret — **Clean**Lisbon, the map's own label, turns claret

Sverige 1931: Krakow in its cream box, lettered in vermilion — **Sverige 1931**Kraków's cream box takes the line's vermilion

Dark: Nice, not yet named on the map, appears as one of its own labels in rose — **Dark**A town the map hadn't named appears as one of its own labels

Nothing added, nothing shoutsNo markers or rings: the map already has a dot and a name for the town, so only the name's colour changes.

A journey, not a slideshowLegs chain from station to station. A destination that can't be reached is swapped for another from the same station.

Pauses with youSwitch tabs and the train waits where it is, then carries on when you come back.

10Formats

One map,
every frame.

The same map fills a chat preview, a laptop, a phone and a printed poster. Each frame gets its own layout, not a crop of another.

1200 × 630 · 1.91 : 1

11Under the hood

All of it,
ours.

No outside map company in the loop. The tiles, fonts, markers, terrain and share cards all come from services we run, on hosting that costs nothing extra.

Open dataOpenStreetMap through Protomaps, and EU-DEM (Copernicus) and other open sources for elevation.

Free to serveStatic files on Cloudflare's free tier, unlimited requests. The card server runs on a machine we already have.

Light on the deviceIdle routes are worked out as needed, with memory held flat instead of growing.

Private by defaultNo map-provider keys or tracking. Your saved maps stay on your device.

12Where it comes from

A century of
railway maps.

The Classic styles are redrawn from real railway maps and posters. We studied more than thirty of them from across Europe, America, Australia and Japan.

LMS system map, c.1925 — **LMS system map**c. 1925 · the source of LMS 1925

Sverige, Swedish State Railways pictorial map, 1931 — **Sverige**SJ / Kartografiska Institutet, 1931 · the source of Sverige 1931

Rheingold poster by Richard Friese, 1928 — **Rheingold**Richard Friese for the Reichsbahn, 1928 · the source of Rheingold

Rhaetian Railway relief poster, 1915 — **Graubünden**Rhätische Bahn, 1915 · from the inspiration deck

Trainmap v2

See it for yourself.

Everything here is Trainmap as it is today. Draw a route, switch between the twelve maps, share it.

Open Trainmap ↗

Map data © OpenStreetMap contributors, via Protomaps. Elevation: EU-DEM (Copernicus), USGS, NOAA and others. Map renderer: MapLibre GL JS. Typefaces: Inter, Source Serif 4, Jost, Josefin Sans and Poiret One (SIL Open Font License). Posters from Wikimedia Commons. Trainmap · About · Privacy

Trainmap,redrawn.

Three ideas,held everywhere.

The journey leads

Paper, not glass

Every map its own voice

Twelve maps,four moods.

A voicefor every map.

Paper, inkand a line of its own.

Every map, its own line

Routes rununder the names.

Lakes, the way locals write them

Ordered bywhat you want to do.

A sheet of paper, lit from above

One app,not pages.

Nothing you make is lost

A slow train,quietly.

Every link,its own cover.

One map,every frame.

All of it,ours.

A century ofrailway maps.

See it for yourself.

Trainmap,
redrawn.

Three ideas,
held everywhere.

Twelve maps,
four moods.

A voice
for every map.

Paper, ink
and a line of its own.

Routes run
under the names.

Ordered by
what you want to do.

One app,
not pages.

A slow train,
quietly.

Every link,
its own cover.

One map,
every frame.

All of it,
ours.

A century of
railway maps.