Find file
Fetching contributors…
Cannot retrieve contributors at this time
100 lines (86 sloc) 3.87 KB
<!DOCTYPE html>
<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.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="/map/tube/lib/">
<link rel="stylesheet" href="/map/tube/lib/leaflet.label.css">
<link rel="stylesheet" href="/map/tube/css.css">
<script src="/map/tube/lib/leaflet.js"></script>
<script src="/map/tube/lib/leaflet.label.js"></script>
<script src="/map/tube/lib/reqwest.min.js"></script>
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 src="/map/tube/js/trains.js"></script>
<div id="map"><div style="padding: 1em; color: gray;">Loading...</div></div>
<div id="header">
<h1>Live London Underground map</h1>
<p>By Matthew Somerville.
<small>Data collected: <span id="update">No data yet</span></small>
<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, all the data used to generate the map is accessible and available from
<a href="">Transport for London's website</a>. &mdash;
<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 id="info_shown">
<p class="showhide"><a href="" onclick="Info.Hide(); return false;">Hide</a>
<p><a href="" class="twitter-share-button" data-count="horizontal" data-via="dracos">Tweet</a><script type="text/javascript" src=""></script>
<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="skyfall/">Skyfall version</a></p>
<p>I have similar things for the <a href="/map/london-buses/">London buses</a>
and <a href="">National Rail</a>,
and an awesome <a href="">bookmarkable train times journey planner</a>.
<a style="background-color: #ffff33; padding: 0 4px;" href="/donate">Donate</a>
<p style="margin-bottom:0; text-align:right">&mdash; <a href="">Matthew</a>
<!-- In the meantime, you can <a href="">see a video of
the site in action</a> courtesy of Gary Gale. -->
<h2>How does it work?</h2>
<a href=""><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"></a>
<p>Live departure data is fetched from the
<a href=""><abbr title="Transport for London">TfL</abbr> API</a>,
and then it does a bit of maths and magic.
Some <abbr title="Hammersmith and City">H&amp;C</abbr> and Circle stations are
missing in the TfL feed.</p>
<h2>Who did this?</h2>
<p><a href="">Matthew Somerville</a>
(with helpful hinderances from <a href="">Frances Berriman</a> and <a href="">James Aylett</a>).
Station icon by <a href="">Tim Diggins</a>.
<p id="footer">
Originally built at <a href="">Science Hackday</a>, June 2010.
<a href="">Source code</a>.
<script type="text/javascript"> load(); </script>