forked from dracos/underground-live-map
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
59 lines (54 loc) · 2.91 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Live map of London Underground trains</title>
<link href="http://traintimes.org.uk:81/map/tube/css.css" type="text/css" rel="stylesheet">
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAr0jEilTj74QAOSQ54V3GrxTwQSawC5yN9rAPq2diDIvxqz2lVRR6lF9P-tXKlfSvPmhASovImKIjbw" type="text/javascript"></script>
<script type="text/javascript" src="http://traintimes.org.uk:81/map/tube/js/pdmarker.js"></script>
<script type="text/javascript" src="http://traintimes.org.uk:81/map/tube/js/trains.js"></script>
</head>
<body onunload="GUnload()">
<h1>Live train map for the London Underground</h1>
<noscript>
<div style="border: solid 2px #cc0000; padding: 5px; width: 70%; margin: 1em auto;">
I'm afraid that this page requires JavaScript to interface with Google Maps
and the data to plot and move the trains, which isn't possible with just HTML.
However, all the data used to generate the map is accessible and available from
<a href="http://www.tfl.gov.uk/">Transport for London's website</a>. —
Matthew
</div>
</noscript>
<p>
<small>Data collected: <span id="update">No data yet</span></small></p>
<div id="map"><div style="padding: 1em; color: gray;">Loading...</div></div>
<div id="loading"></div>
<div id="info">
<p id="showhide"><a href="" onclick="Info.Hide(); return false;">Hide »</a>
<h2>What is this?</h2>
<p>This map shows all trains on the London Underground network.
The yellow pins are stations (click for a local map of that
station), the red pins trains. The trains move in approximately real
time. I have a (per-station) <a href="../">National Rail version</a>,
and a <a href="/">bookmarkable journey planner</a>.</p>
<h2>How does it work?</h2>
<p>Live departure data is fetched from the <a href="http://data.london.gov.uk/apibeta">TfL API</a>, and then it does
a bit of maths and magic. It’s surprisingly okay given this
was done in only a few hours at <a href="http://sciencehackday.com/">Science Hackday</a>
and the many naming/location issues, some
unresolved (a small number of stations are misplaced or missing;
inter-station journey times need improvement; <em>occasional trains
behave oddly due to duplicate IDs</em>; some H&C stations are
missing in the TfL feed).</p>
<h2>Who did this?</h2>
<p><a href="http://twitter.com/dracos">Matthew Somerville</a>
(with helpful hinderances from <a href="http://twitter.com/phae">Frances Berriman</a> and <a href="http://twitter.com/jaylett">James Aylett</a>).
<a href="http://github.com/dracos/underground-live-map">Source code</a>.
</p>
<p id="footer">Woo, thanks TfL! Now how about it, National Rail?
Open train data is good for everyone.</p>
</div>
<script type="text/javascript"> load(); </script>
</body>
</html>