Unofficial Map: London Underground Map Recreated Entirely in CSS

Even though I’m mainly a print designer, I’ve done enough web design work to know how fiddly (yet also powerful) Cascading Style Sheets (CSS) can be. That’s why I’m totally in awe of this incredibly accurate rendition of the Tube Map, created with nothing but code by John Galatini. Not one image file to be seen! Johnston Sans is recreated with a web font, while the symbols for accessibility, National Rail, ferries, the Emirates Airline, etc. seen on the map are all “drawn” completely with CSS code. John estimates that the project took around 120 hours to complete, and I can believe him!

While the project’s website gives some great technical information on how the map was achieved, I prefer John’s own description on Twitter:

“It’s basically lots of rectangles and squares, lots of border-radius (to create circles) and a shit load of css rotation.”

Our rating: An astounding example of what CSS can do. Five stars!

(Source: CSS Tube website)

Historical Map: London Connections, 1988

The reverse side of the British Rail Network SouthEast map, showing the detailed view of the area surrounding London. While this map is designed in a very similar style (at the same time, by the same people) to the regional map, I feel it’s slightly less successful for a few reasons.

The inclusion of the London Underground introduces many more colors to the map, which instantly makes it feel much busier. After using all these familiar and well-established colours for the Underground, there really aren’t many colours left to use for the main line/Network SouthEast routes. So they get saddled with orange, a very vivid, powerful colour that visually dominates the map, especially south of the Thames.

Interestingly, the London Overground — a service which has largely been formed from parts of these old main line routes — also uses orange as its route colour: is this map the origin of that designation?

Other points of interest: The Docklands Light Railway, opened the previous year, is shown but has not yet acquired its distinctive teal route colour. The Waterloo & City Line (a very short line between Waterloo and Bank stations) is still part of British Rail, not the Underground.

See also this British Rail map from 1965 (May 2012, 4.5 stars) that covers a very similar area but omits the Underground.

Our rating: A fine piece of work that skillfully incorporates a lot of information, but not as excellent as its sibling. Three stars. 

(Source: smallritual/Flickr)

Historical Map: Circular London Underground Map Sketch, Harry Beck, c. 1964

For those who thought that the two circular London Underground diagrams I featured earlier this year — by Jonny Fisher and Maxwell Roberts — were a completely modern twist on an old classic, here’s a reminder of just how forward-thinking Harry Beck really was.

This is a sketch, dated to 1964 at the earliest (due to his adoption of Paul Garbutt’s dot-in-a-circle device for main line interchange stations), that presents the Circle Line as a perfect ellipse. Quite a stunning contrast to his usual rigidly rectilinear diagrams, if perhaps ultimately not a huge improvement — much as the two modern maps are exercises in design, rather than a replacement for the original. Note also that this beautiful sketch is entirely hand-drawn: not a computer to be seen in it’s creation.

(Source: Scanned from my personal copy of Mr. Beck’s Diagram by Ken Garland, Capital Transport Publishing, 1994)

Unofficial Map: Live Map of London Underground Trains

Submitted by Travertine Libertine without comment.

——

Transit Maps says:

Created by Matthew Somerville.

Totally hypnotic after a while as all those little yellow train dots start racing around (it kind of reminds me of a mash-up between the Scotland Yard board game and the original Railroad Tycoon). Childhood reminiscing done, it really is amazing what can be done with raw data pulled via an API these days. Stuff like this is the future of transit information.

Historical Map: (1985?) London Tube Map

This map has certainly seen better days! The fact that the Hammersmith & City (salmon pink) line is not shown dates this map prior to 1990: the “peak hour only” dashed line on the very light purple Metropolitan Line, combined with the black text for station names leads me to believe that this is the 1985 map. By 1987, the Metropolitan Line had become a much darker colour, and station labels were the now-familiar blue.

explore-blog:

Beautifully minimalist line-drawing postcards of London Underground train depots. Complement with a pictorial history of how the Underground shaped London.

(↬ Quipsologies)

Starkly beautiful and quite excellently done. Matching the background colour to the Underground line each depot serves is a masterstroke.

Here’s the designer’s rationale behind these great cards.

(Back in) Time Tunnel

I love it when people find old transit maps still in situ at stations. This Northern Line map at Embankment dates from sometime prior to 1999 (the year that the Jubilee Line platforms at Charing Cross closed), but is still in place today — this photo was taken on February 21, 2013.

Note also the beautiful 1914 green glazed tiles next to the map.

(Source: stavioni/Flickr)

London Underground Abstract: Barbican

I’m totally loving this series of work by Nick Saltmarsh on Flickr. By zooming right in on details of the Tube Map, he makes us take another look at something that’s so familiar and ubiquitous.

Check out the full set here. Some are more successful than others, but all are interesting… and some make awesome abstract art pieces.

Unofficial Map: Circular Tube Map by Maxwell Roberts

Apparently, circular Tube Maps are like London buses — none come forever, then two arrive at the same time.

This one is by Maxwell Roberts, an expert on the London Underground map if there ever was one. He’s personally redrawn multiple, multiple versions of the map in just about every possible configuration, just to see what works and what doesn’t. Many are featured in his excellent book, Underground Maps Unravelled, which I promise I’ll review properly one day.

Wisely, Roberts has confined his map to the traditional view of Greater London itself, with trains headed to distant places given an arrow pointer towards that destination.

Interestingly, most of his route lines radiate out from a central point, but some run parallel to other routes instead. This makes the design less rigid to a design ideal, but also upsets the visual flow of the diagram in a couple of places — I find the parallel Bakerloo and Metropolitan Lines in the northwest part of the map quite jarring.

Roberts’ interchange stations are much tighter than Fisher’s, looking far more like “traditional” Tube Map markers, but some are still very convoluted in making their connections between lines, such as at Farringdon/Barbican.

The London Underground logo “hidden” in the Circle Line is a bit of a gimmicky design affectation, although it actually works surprisingly well in the context of the diagram.

Overall, I think this version is more successful than Jonny Fisher’s, although I still don’t really see it as a viable alternative to the current official map. Neither does Mr. Roberts, who says, “Overall though, I don’t think I will be sending this one to TfL for comments. No great advances in usability here, but it was fun to make it.” Three-and-a-half stars.

(Source: Going Underground blog — click through for more detailed analysis from Maxwell Roberts himself)