6 ms·
CSS Tube Map
- omegote 13y agoI don't get it. Seriously. If you want to show off and build a map using CSS, create a codepen or something like that. But buying a domain specifically for this? This is nuts.
- mclaughlin 13y agono it is not nuts. A domain is not expensive, plus you have no idea what's his plan for it. To the OP, don't people in the UK use facebook? Add a like button. And the tweet button is taking the current url so on your info page it shows 0 tweets (you might want to change that)
- gbuckingham89 13y agoIt's not my project - just something I spotted.
- andyhmltn 13y agoDomains cost ~$10
- georgebashi 13y ago.co.uk is super cheap, actually about $5.
- jstanley 13y agoI own a .xxx domain (£65/yr) for my own amusement, and I see this response a lot. Why does that fact that other people choose to buy domain names annoy some people?
- shubb 13y agoThe official PDF tube maps are pretty bad. I don't know what they did to the PDFs but they take 3 seconds to render on my modern laptop, and do not work with some opensource readers. Try it yourself[1]. I'd be more likely to refer to this map now than the official PDF, so it's nice that it has a memorable URL. [1]http://www.tfl.gov.uk/assets/downloads/standard-tube-map.pdf http://www.tfl.gov.uk/assets/downloads/standard-tube-map.pdf
- fredley 13y agoReally great work! I've bookmarked this as my go-to map, this is an impressive improvement in ease of use over the official TFL pdfs.
- quarterto 13y agoNice. Where did you get that Johnston-alike font?
- boristhespider 13y agoApparently it's London Tube Normal (http://www.azfonts.net/load_font/londontube.html http://www.azfonts.net/load_font/londontube.html). P22 Underground might have been nicer, but costlier. There's also Hammersmith One on Google Fonts: https://www.google.com/fonts/specimen/Hammersmith+One https://www.google.com/fonts/specimen/Hammersmith+One
- calpaterson 13y agoYou haven't included the river (or, at least, it's not displaying for me)! :(
- deleted 13y ago[deleted]
- martin_ 13y agoIncredible! But why @import?
- eterm 13y agoDisappointing, I was expecting mousewheel to zoom. Somehow a map without that functionality (even knowing it's CSS implemented) is unusable to me now.
- arethuza 13y agoDoesn't your browser use the mousewheel to zoom when you hold down the Ctrl key? Chrome and Firefox do.
- ck2 13y agoThis is also great (same author) http://www.csstardis.co.uk/ http://www.csstardis.co.uk/
- DavidBradbury 13y agoSo in other words, the author of this and the original post is really good at using the wrong tool for the job. I think it would greatly increase his credibility if he would mention that this isn't what CSS is meant to be used for and is just doing it for demo purposes. Too many people seem to get the impression that CSS should be used for actually drawing things.
- jcomis 13y agoWho is getting that impression that css is supposed to be used this way? It's meant to show what is possible. That's it. I think it's already absurd that most of the posts here are dog piling on the creator for "using the wrong tool" but to say it decreases his credibility for not mentioning this is not what css was meant for? That's just plain wrong in my opinion. It's a fun thing, let it be what it is.
- krumiro79 13y agoNice Work! Small typo.. it's "Elverson Road".
- krumiro79 13y agoand "Wandsworth Road", "Brent Cross".... you should probably go through all of them quickly...
- brokenparser 13y agoIt's not valid HTML!
- andydrizen 13y agoDid you have to get a licence to display this? TfL are pretty strict about reproducing their map, even more so if it's going to be available offline on a mobile device. http://www.tfl.gov.uk/corporate/media/7482.aspx http://www.tfl.gov.uk/corporate/media/7482.aspx
- koyote 13y agoDoes he need a licence if the entire map is built programmatically and no TFL 'resource' (as in artwork) has been used directly?
- brntn 13y agoYes.
- andydrizen 13y agoYes, otherwise it's copyright infringement. I've been working on a mobile app for some time. As an indie developer, the map license is almost fatal for my project.
- koyote 13y agoI have however seen people get around this by making their own version of the map; often opting for a map that more closely resembles the true relative positions of the stations. Naturally this CSS map is an almost 1-for-1 copy of the original. But how far would it have to diverge to not be copyright infringement? Different colours? Use rounder angles ?
- alexbilbie 13y agoYes. I've spoken to TFL Licensing a few times about their map and basically they will claim copyright over any map that features the circle line in a "bottle" shape. There are also restrictions over the font, logos and symbols.
- koyote 13y ago
- bradleyg_ 13y agoNice. Finally I can Command+F to find a station.
- bbx 13y agoI remember starting to make one for Paris a couple of years ago: http://i.imgur.com/fbK6Org.png http://i.imgur.com/fbK6Org.png But I never took the time to finish it.
- andrewfelix 13y agoA+ for effort. But (and this sounds harsh I know) I fail to see any innovation here. Codewise it's cute, but functionally wouldn't a canvas element make more sense than a couple of hundred list elements?
- jaffathecake 13y agoCanvas wouldn't graphically scale as nicely. You could argue that SVG would be more appropriate, but this solution works on the old Android 2 browser whereas SVG doesn't.
- ryalfalpha 13y agoCould probably ensure it fits in the window nicely though, with zooming etc. Seeing only the North-West of London on screen without scrolling is not as useful. I'd imagine it's damn hard to use on a laptop without two direction scrolling. Functional over pretty, I vote :)
- balloot 13y agoSame here. Was expecting some cool canvas demo. This is fine, but a lack of zoom out makes it decidedly less useful than other maps out there.
- techbubble 13y agoI created a jQuery plugin to render subway maps using canvas a few years ago when I was getting into HTML5. Here's a demo http://kalyani.com/subwaymap http://kalyani.com/subwaymap and a detailed guide http://kalyani.com/2010/10/subway-map-visualization-jquery-plugin/ http://kalyani.com/2010/10/subway-map-visualization-jquery-p...
- DrJokepu 13y agoSo did you end up licensing the P22 Jonhston typeface or is this an alternative New Johnston lookalike? And if yes, which one?
- TeeWEE 13y agoWhile its cool demo of what CSS can do... The reality is: CSS is not meant for this. Its a cool demo but technical speaking its nonsense to use CSS for this. It should have been made with SVG, or a similar kind of technology. There are enough vector renderers for example the canvas element if there is no SVG support.
- nick2021 13y agoI completely agree. I'm not sure this should be titled CSS as it's really HTML and CSS. Should have been done in SVG and CSS.
- dt7 13y agoThis could actually have a very helpful application- generating maps with customised colour schemes. Anyone with a form of colour blindness will know that some of the lines on the standard map are basically indistinguishable from each-other, and while TfL does provide a black-and-white map, it's designed for ALL forms of colour blindness, so they've had to come up with a load of different patterns, making it a bit messy (http://www.tfl.gov.uk/gettingaround/14091.aspx http://www.tfl.gov.uk/gettingaround/14091.aspx). With this CSS map a user could customise the colour/pattern of just a couple of problem lines (I could already in Firebug, but it would be great if there was a control panel to fiddle these things and then provide print/save links). Just an idea!
- nkorth 13y agoActually, SVG can use "classes" just like CSS, so it could be easily recolored in SVG too.
- dt7 13y agoI suppose the main thing you'd need is a data source mapping the stations and lines, then build it in whatever technology from that. The information page doesn't mention where the data came from, so I imagine it was manually created. I don't think TfL would be too willing to provide that data either, judging by the comments regarding licensing etc. in this thread.
- mcdowall 13y agoOur map changes 3-4 times per year for new stations / closures etc so supportability of something like absolute CSS locations would never fly. Fair play for giving this a go though, it's pretty darn accurate and super quick!.
- dm8 13y agoLooks like someone was not happy with this map. Now visiting their website - "Regrettably I have decided to take down this project whilst I investigate licensing rules regarding my use of the Underground Map which is owned by Transport for London."