CSS Tube Map | Hacker News Reader

CSS Tube Map

csstubemap.co.uk

101 pointsgbuckingham8944 comments

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!

Actually, SVG can use "classes" just like CSS, so it could be easily recolored in SVG too.

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.

A+ 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?

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 :)

Same 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.

I 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 and a detailed guide http://kalyani.com/2010/10/subway-map-visualization-jquery-p...

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.

http://www.tfl.gov.uk/corporate/media/7482.aspx

Does he need a licence if the entire map is built programmatically and no TFL 'resource' (as in artwork) has been used directly?

Yes.

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 ?

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?

#whole-map { rotation:180deg; }

It might result in a few confused travellers, but hey.

Nice. Finally I can Command+F to find a station.

I remember starting to make one for Paris a couple of years ago: http://i.imgur.com/fbK6Org.png

But I never took the time to finish it.

Really 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.

This is also great (same author) http://www.csstardis.co.uk/

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!.

Nice. Where did you get that Johnston-alike font?

Apparently it's London Tube Normal (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

So did you end up licensing the P22 Jonhston typeface or is this an alternative New Johnston lookalike? And if yes, which one?

You haven't included the river (or, at least, it's not displaying for me)! :(

Nice Work! Small typo.. it's "Elverson Road".

and "Wandsworth Road", "Brent Cross".... you should probably go through all of them quickly...

Disappointing, I was expecting mousewheel to zoom. Somehow a map without that functionality (even knowing it's CSS implemented) is unusable to me now.

Doesn't your browser use the mousewheel to zoom when you hold down the Ctrl key? Chrome and Firefox do.

Incredible! But why @import?

It's not valid HTML!

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.

no 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)

It's not my project - just something I spotted.

Domains cost ~$10

.co.uk is super cheap, actually about $5.

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?

The 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

Renders instantly in Safari for me.

Renders instantly in Chrome, looks great, and a PDF is far more practical than an HTML/CSS implementation

Reply on news.ycombinator.com