This Train Map Is Not An Image, Just Pure Code

This Train Map Is Not An Image, Just Pure Code

This version of London’s iconic tube map looks just like the official PDF of the transport network. In fact, it is created entirely from HTML, CSS and JavaScript.

That’s a pretty insane feat. Its creator, freelance web developer John Galantini, has recreated every symbol, line, circle and piece of text using HTML and CSS. Each train line is, in fact, an unordered list, with stations positioned in relation to each other using CSS. The map took 120 hours work over five weeks to complete. Pointless, perhaps — but nonetheless impressive. [John Galantini via Sidebar via The Verge]

Republished from Gizmodo


  • Saw this on Giz before. And really…

    Code is code. Data is data.

    If you can make a picture in code, good job. It’s easier in data, that’s what the various file-types (with much better performance) are there for.

    Sure, good job, not every programmer could do this in a day – that said, don’t waste time on stuff like this, its basically a jerk-off contest…

    • Vector vs raster is where the only relevant difference is. Do it in vector in Photoshop, and write an exporter that writes HTML5/CSS3 output. Would have been much more interesting and much more useful.

Log in to comment on this story!