Permalink
Browse files

Skyfall version (just edited copy-n-paste).

  • Loading branch information...
1 parent c1f2c46 commit fb6703117f78e16b7bd55d48d868cd3c41890fe7 @dracos committed Jan 12, 2013
Showing with 491 additions and 1 deletion.
  1. +3 −1 index.html
  2. BIN skyfall/black.png
  3. +85 −0 skyfall/css.css
  4. BIN skyfall/dot.png
  5. +70 −0 skyfall/index.html
  6. +333 −0 skyfall/trains.js
View
@@ -35,7 +35,9 @@
<h2>What is this?</h2>
<p>This map shows all trains (yellow pins) on the London Underground network
in approximately real time (<a href="lu-screenshot.png">screenshot</a>).
-Click the stations for a local map of that station.</p>
+Click the stations for a local map of that station.
+<a href="skyfall/">Skyfall version</a></p>
+
<p>I have a (per-station) <a href="http://traintimes.org.uk/map/">National Rail version</a>,
and an awesome <a href="http://traintimes.org.uk/">bookmarkable train times journey planner</a>.</p>
<p style="margin-bottom:0; text-align:right">&mdash; <a href="http://twitter.com/dracos">Matthew</a>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,85 @@
+/* v\:* {
+ behavior:url(#default#VML);
+}
+*/
+body {
+ background-color: black;
+ color: white;
+ font-family: "Gill Sans MT", sans-serif;
+ padding: 0;
+ margin: 10px 10px 0;
+}
+a:link { color: #ff3333; }
+a:visited { color: #ff9999; }
+a:active, a:hover { color: #cccc66; }
+
+img {
+ border: 0;
+}
+
+#map {
+ width: 500px;
+ height: 700px;
+ /*border: 1px solid #999999; */
+ background-color: #e5e3df;
+ float: left;
+}
+
+#footer {
+ font-size: smaller;
+ border-top: dotted 1px #999999;
+ padding-top: 5px;
+}
+
+div.markerTooltip, div.markerDetail {
+ font-size: 83%;
+ color: white;
+ /*background-color: white;*/
+ white-space: nowrap;
+ margin: 0;
+ padding: 2px 4px;
+ /*border: 1px solid black;*/
+}
+
+h1 {
+ font-size: 175%;
+ /*border-bottom: dotted 2px #cccccc; */
+ margin: 0 0 0.5em 0;
+}
+
+#info {
+ width: 250px;
+ float: right;
+}
+#info #showhide {
+ float: right;
+ margin: 0;
+}
+#info h2 {
+ margin: 0;
+}
+#info h3 {
+ margin-bottom: 0;
+}
+#info p, #info ul {
+ margin-top: 0;
+}
+#info ul {
+ margin-left: 1.5em;
+ padding-left: 0;
+}
+
+#loading {
+ position: absolute;
+ top: 0; left: 0;
+ margin: 0 0 0 -16px;
+ text-align: center;
+ width: 32px;
+ color: black;
+ background-color: white;
+ font-size: 150%;
+ border: solid 1px #999999;
+ padding: 4px;
+ display: none;
+ line-height: 1;
+}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,70 @@
+<!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="/map/tube/skyfall/css.css" type="text/css" rel="stylesheet">
+ <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAr0jEilTj74QAOSQ54V3GrxTwQSawC5yN9rAPq2diDIvxqz2lVRR6lF9P-tXKlfSvPmhASovImKIjbw" type="text/javascript"></script>
+ <script type="text/javascript" src="/map/tube/js/pdmarker.js"></script>
+ <script type="text/javascript" src="/map/tube/skyfall/trains.js"></script>
+ </head>
+ <body onunload="GUnload()">
+ <!-- <div style="padding: 0.5em; text-align: center; font-weight: bold; z-index: 2000; background-color: #ff9900; color: black; position: absolute; width: 10em; top: 40%; left: 50%; margin-left: -5em"><em>Error in TfL feed</em><br>No data available</div> -->
+
+ <h1>Live train map for the London Underground, by Matthew Somerville</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>. &mdash;
+Matthew
+</div>
+</noscript>
+ <p style="margin-bottom:0">
+ <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 &raquo;</a>
+
+<p><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="dracos">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+
+<div style="margin-bottom: 1em;">
+<h2>What is this?</h2>
+<p>This map shows all trains on the London Underground network
+in real time, in the style of the map in Skyfall
+after seeing they had a version of my <a href="../">original</a> map :-)</p>
+<p>I have a (per-station) <a href="http://traintimes.org.uk/map/">National Rail version</a>,
+and an awesome <a href="http://traintimes.org.uk/">bookmarkable train times journey planner</a>.</p>
+<p style="margin-bottom:0; text-align:right">&mdash; <a href="http://twitter.com/dracos">Matthew</a>
+</div>
+
+<!-- In the meantime, you can <a href="http://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>
+<p>Live departure data is fetched from the
+<a href="http://www.tfl.gov.uk/businessandpartners/syndication/"><abbr title="Transport for London">TfL</abbr> API</a>,
+and then it does a bit of maths and magic.
+A small number of stations are misplaced or missing;
+occasional trains behave oddly; 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="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>).
+Station icon by <a href="http://red56.co.uk/">Tim Diggins</a>.
+</p>
+
+<p id="footer">
+Originally built at <a href="http://sciencehackday.com/">Science Hackday</a>, June 2010.
+<a href="http://github.com/dracos/underground-live-map">Source code</a>.
+</p>
+
+ </div>
+ <script type="text/javascript"> load(); </script>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit fb67031

Please sign in to comment.