Sign in with
Sign up | Sign in

Programmer Recreates London Tube Map in Code

By - Source: via the Verge | B 15 comments

The London Underground has seen many different versions of its map, but this one from programmer John Galantini is probably our favorite. Galantini is a freelance web developer and CSS artist. To celebrate the 150-year anniversary of the London Underground, he recreated the iconic map designed by Harry Beck in code.

 

The map was created using HTML5, CSS3 and jQuery and contains images. Galantini says the map uses absolutely no images and all of the symbols have been recreated using HTML entities, styled and arranged by CSS.

"Each tube line is effectively an unordered list, stations and connections are list-items; each containing the station's name and markup for any associated symbols," he wrote on his website. "Everything is then positioned absolutely."

Galantini says the project took up fives weeks of evenings and weekends, or 120 hours. You can check out the map in full here.

Discuss
Display all 15 comments.
This thread is closed for comments
  • 3 Hide
    igot1forya , May 23, 2013 6:10 AM
    Looks like a jumbled mess in IE9 - Chrome looks normal though. Ah how IE blows :) 
  • 5 Hide
    belardo , May 23, 2013 6:14 AM
    It's actually a very well made map. Not requiring a PDF viewer... Crisp in full view and still readable... And crisp when zoomed in. Our city has a much simpler transit system, but would be handy to have this level of quality
  • -1 Hide
    bombebomb , May 23, 2013 7:04 AM
    Lies, I just clicked on it and it's a png.
  • -1 Hide
    Soda-88 , May 23, 2013 7:04 AM
    Quote:
    Looks like a jumbled mess in IE9 - Chrome looks normal though. Ah how IE blows :) 


    http://ie.microsoft.com/testdrive/info/downloads/

    You're welcome
  • 0 Hide
    ddpruitt , May 23, 2013 7:42 AM
    I don't see how this is such a big deal. A couple of us used to have little competitions in high school doing the same thing in basic (yikes!).
  • 2 Hide
    ricardok , May 23, 2013 7:51 AM
    Same messy map on IE10.. Thank god for Chrome.. :D 
  • 0 Hide
    smeezekitty , May 23, 2013 8:27 AM
    Renders fine in firefox. IE sucks :/ 
  • 0 Hide
    smeezekitty , May 23, 2013 8:28 AM
    Quote:
    Lies, I just clicked on it and it's a png.


    Click the link.
  • 0 Hide
    Horhe , May 23, 2013 8:44 AM
    Looks good on Firefox too. I like how fast it loads, maybe we could make programs that will generate these kind of maps from images, because I reckon it's much easier to make an image in Flash, Photoshop or whatever software is used to make these.
  • 0 Hide
    bombebomb , May 23, 2013 9:05 AM
    Quote:
    Quote:
    Lies, I just clicked on it and it's a png.


    Click the link.

    I was being sarcastic :( 
  • 0 Hide
    roamingaround , May 23, 2013 10:52 AM
    It works fine in FireFox too. Just another IE fail. Glad there are quality alternatives
  • 0 Hide
    Old_Fogie_Late_Bloomer , May 23, 2013 11:38 AM
    I thought this was going to be riffing off that ridiculous hacking scene from Skyfall...
  • 0 Hide
    gm0n3y , May 23, 2013 11:45 AM
    Quote:
    The map was created using HTML5, CSS3 and jQuery and contains images. Galantini says the map uses absolutely no images and all of the symbols have been recreated using HTML entities, styled and arranged by CSS.

    So does it contain images or not?
    Looking at the actual HTML, it doesn't contain images. I'm a programmer, but would not have the patience to make the train and boat icons using CSS. The result is actually pretty impressive and his code looks much cleaner than most web designers that I've worked with.
  • 0 Hide
    Darkk , May 23, 2013 1:33 PM
    Google Chrome and Firefox rendered the web page perfectly while IE10 failed miserably.
    That page should be set standard for testing HTML5 compatibility.
    By the way Microsoft quit IE business totally and stick to making OS.
  • 0 Hide
    scythe944 , May 23, 2013 3:50 PM
    Aww... it's so PRETTY in IE 10 :-)