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: British Rail Network SouthEast, 1988

Network SouthEast was an operating division of British Rail that was formed in 1982 (although it was known as London & South Eastern until 1986). It was responsible for inter-city and commuter rail for the densely-populated south east of England, including London. Of course, beginning in 1994, Network SouthEast was privatised along with the rest of British Rail, leading to the convoluted network of private rail companies we see today.

But what we have here is a very handsome network map, which obviously owes a great deal to the London Underground map, but has enough of its own identity to stand alone. This is mainly achieved by the removal of the Underground’s distinctive Johnston Sans typeface, replaced with what looks like a condensed Helvetica or similar Gothic face.

The map is broken down into six regions, which are cleverly shown by only using three repeating colours (red, blue and grey): this prevents the map from looking too rainbow-like and gives it a more corporate feeling. A fourth colour — orange — is used to show the brand-new ThamesLink service running north-south through London.

The London region itself only shows main terminals and connecting stations: a more detailed map of this area is shown on the reverse of this map: this keeps the map clean and uncluttered.

About the only real problem I have with this map is the colour of the water, which is almost exactly the same as the blue type that is used to denote connecting ferry services and ports. For example, there’s a ferry to France from Newhaven Harbour, but it’s very difficult to make that out.

Our rating: An excellent example of mid-1980s map design (remember: this is still before computers entered the design field, so a map of this complexity was quite an undertaking). Four 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.

All Aboard the Orient Express!

Here’s an absolutely charming little map found on the inside of a French model train set box lid. I don’t have a definitive date for this, but it does have a lovely retro feel to it.

The map itself isn’t much help, as it’s pretty much a work of fiction: a weird combination of different parts of the Orient Express’s historical routes (see this diagram on Wikipedia) and a branch to Warsaw via Prague that was never part of the train’s itinerary.

Maybe, as simple artwork intended for a children’s toy, the designers were simply thinking that no one would notice any inaccuracies. Looks great, though!

(Source: japanese forms/Flickr)

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.