-
Notifications
You must be signed in to change notification settings - Fork 50
/
index.html
105 lines (93 loc) · 4.01 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Live map of London Underground trains</title>
<link rel="stylesheet" href="/map/tube/lib/leaflet.core-and-label.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="/map/tube/lib/leaflet.ie.css">
<![endif]-->
<link rel="stylesheet" href="/map/tube/css.css?2017-11-05c">
<script src="/map/tube/lib/leaflet.core-and-label.js"></script>
<script>
var docEl = document.documentElement; docEl.className = docEl.className.replace(/\bno-js\b/,"js");
var TrainTimes = {
refresh: 1,
keep_trains: true,
url: '/map/tube/',
centre: [51.507, -0.120],
fit_bounds: false,
station_icon: true,
train_colour: '#ff0'
};
</script>
<script src="/map/tube/js/trains.js?2019-07-21"></script>
</head>
<body>
<div id="map"><div style="padding: 1em; color: gray;">Loading...</div></div>
<div id="header">
<h1>Live London Underground map –
Geographic
<a href="?pacman"><img src="i/pacmanS.png" alt="Pacman" width=16 height=16 border=0 align=bottom></a>
|
<a href="schematic/">Schematic</a>
<a href="schematic/?pacman"><img src="i/pacmanS.png" alt="Pacman" width=16 height=16 border=0 align=bottom></a>
|
<a href="skyfall/">Skyfall</a>
</h1>
<p>By <a href="https://dracos.co.uk/">Matthew Somerville</a>.
<small>Data collected: <span id="update">No data yet</span></small>
</div>
<noscript>
<div style="border: solid 2px #cc0000; padding: 5px; width: 70%; margin: 1em auto;">
I'm afraid that this page requires JavaScript to draw the maps and plot
move the trains, which isn't possible with just HTML. However, follow
this link for a textual description of the entire network:
<a href="./text.php">Textual description of the London Underground</a>
</div>
</noscript>
<div id="loading"></div>
<div id="info">
<div id="info_show">
<p class="showhide"><a href="" onclick="Info.Show(); return false;">More information</a></p>
</div>
<div id="info_shown">
<p class="showhide"><a href="" onclick="Info.Hide(); return false;">Hide</a>
<div style="margin-bottom: 1em;">
<h2>What is this?</h2>
<p>This map shows all trains (yellow dots) on the London Underground network
in approximately real time.
<a href="schematic/">Schematic version</a>, or
<a href="skyfall/">Skyfall version</a></p>
<p>I have similar things for the <a href="/map/london-buses/">London buses</a>
and <a href="https://traintimes.org.uk/map/">National Rail</a>,
and an awesome <a href="https://traintimes.org.uk/">bookmarkable train times journey planner</a>.
<a style="background-color: #ffff33; padding: 0 4px;" href="/donate">Donate</a>
</p>
<p style="margin-bottom:0; text-align:right">— <a href="https://dracos.co.uk/">Matthew</a>
</div>
<!-- In the meantime, you can <a href="https://www.flickr.com/photos/vicchi/4730203122/">see a video of
the site in action</a> courtesy of Gary Gale. -->
<h2>How does it work?</h2>
<img border="0" align="right" src="/map/tube/i/trophy.png" hspace="5" height="100" width="55" alt="2nd prize App in the Open Data Challenge">
<p>Live departure data is fetched from the
<a href="https://tfl.gov.uk/info-for/open-data-users/"><abbr title="Transport for London">TfL</abbr> API</a>
(Powered by TfL Open Data), and then it does a bit of maths and magic.
Some <abbr title="Hammersmith and City">H&C</abbr> and Circle stations are
missing in the TfL feed.
</p>
<h2>Who did this?</h2>
<p><a href="https://dracos.co.uk/">Matthew Somerville</a>
(with helpful hinderances from <a href="https://twitter.com/phae">Frances Berriman</a> and <a href="https://twitter.com/jaylett">James Aylett</a>).
Station icon by <a href="https://www.red56.uk/">Tim Diggins</a>.
</p>
<p id="footer">
Originally built at <a href="https://sciencehackday.org/">Science Hackday</a>, June 2010.
<a href="https://github.com/dracos/underground-live-map">Source code</a>.
</p>
</div>
</div>
<script type="text/javascript"> load(); </script>
</body>
</html>