While 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.
This 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).
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!
I 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.
Canvas 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.
Could 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 :)
Did 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.
Yes. 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.
I have seen people get around it by making their own version of the map. Those maps usually end up having the stations match their respective locations to each other more closely. They naturally don't look as 'good' as the official map though.
But where does the copyright infringement start? Could you technically get around it if you changed a couple of the colours and fonts around and used slightly different angles?
Yes, 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.
I 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 ?
So 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.
Who 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.
Looks 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."
Our 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!.
I 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.
I 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?
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.
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.