
CSS Tube Map - gbuckingham89
http://www.csstubemap.co.uk/
======
TeeWEE
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.

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

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

~~~
dt7
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.

------
andrewfelix
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?

~~~
jaffathecake
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.

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

------
andydrizen
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>

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

~~~
alexbilbie
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.

~~~
koyote
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?

~~~
davidvaughan
#whole-map { rotation:180deg; }

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

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

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

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

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

~~~
DavidBradbury
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.

~~~
jcomis
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.

------
dm8
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."

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

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

~~~
boristhespider
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>

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

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

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

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

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

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

------
martin_
Incredible! But why @import?

------
brokenparser
It's not valid HTML!

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

~~~
shubb
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>

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

