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]


    PDF is code.

      Yes, and so is everything you see on a computer screen, but that's not the point, is it?

        No, PDF's internal structure is code. It's a fully defined description language that gets interpreted, not just data. Jamie says "this is not an image, it's pure code" but PDF files are also pure code, and not image data. Done in HTML or done in PDF is the same thing, from a code/data perspective.

          While you are technically correct, you're either being deliberately pedantic (read trolling), or you're missing the point entirely.

          A PDF is not created by a programmer sitting down for 120 hours and hacking together something legible. It's created either in Adobe Acrobat (or similar) or by using a pdf printer of some sort.

          This was not. This was coded, as in the programmer sat down for 120 hours and hacked together something legible.

            Right, because PDF documents just assemble themselves by the power of unicorns and pixie dust without any work on the part of the designer. Both involve using tools to ease the work of creating the image, there's little difference between them: the effort, implementation and result is the same; they only differ in language (PDF/PS vs HTML/CSS).

    No doubt it fails miserably on IE....

    The Hammersmith Aldwych curve is even more jarring that the official.

    I can't see the image.. so I guess it's not all that compatible with everything..

    Imagine how much simpler this would have been if CSS didn't suck.

Join the discussion!

Trending Stories Right Now