Get Skyfall version working with Leaflet as well.

dracos · Feb 23, 2013 · 8683186 · 8683186
1 parent 3088bc7
commit 8683186
Show file tree

Hide file tree

Showing 5 changed files with 261 additions and 353 deletions.
diff --git a/index.html b/index.html
@@ -41,7 +41,7 @@ <h1>Live train map for the London Underground, by Matthew Somerville</h1>
 <h2>What is this?</h2>
 <p>This map shows all trains (yellow dots) on the London Underground network
 in approximately real time (<a href="lu-screenshot.png">old screenshot</a>).
-<!-- <a href="skyfall/">Skyfall version</a></p> -->
+<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>

diff --git a/js/trains.js b/js/trains.js
@@ -65,6 +65,7 @@ var Train = L.CircleMarker.extend({
         });
     },
     updateDetails: function(train) {
+        this.train_id = train.id;
         this.startPoint = train.point;
         this.justLeft = train.left;
         this.title = train.title;

diff --git a/skyfall/css.css b/skyfall/css.css
@@ -1,85 +1,99 @@
-/* v\:* {
-	behavior:url(#default#VML);
+html, body {
+    height: 100%;
 }
-*/
 body {
-	background-color: black;
-	color: white;
-	font-family: "Gill Sans MT", sans-serif;
-	padding: 0;
-	margin: 10px 10px 0;
+    background-color: black;
+    color: white;
+    font-family: "Gill Sans MT", sans-serif;
+    padding: 0;
+    margin: 0;
 }
 a:link { color: #ff3333; }
 a:visited { color: #ff9999; }
 a:active, a:hover { color: #cccc66; }
 
 img {
-	border: 0;
+    border: 0;
 }
 
 #map {
-	width: 500px;
-	height: 700px;
-	/*border: 1px solid #999999; */
-	background-color: #e5e3df;
-	float: left;
+    width: 100%;
+    height: 100%;
+    background-color: #e5e3df;
 }
 
 #footer {
-	font-size: smaller;
-	border-top: dotted 1px #999999;
-	padding-top: 5px;
+    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;*/
+.leaflet-label {
+    color: #fff;
+    background-color: inherit;
+    margin: 0;
+    padding: 0 2px;
+    border: none;
+    font-weight: normal;
+}
+.leaflet-label::before {
+    display: none;
 }
 
 h1 {
-	font-size: 175%;
-	/*border-bottom: dotted 2px #cccccc; */
-	margin: 0 0 0.5em 0;
+    color: #fff;
+    background-color: #000;
+    -webkit-box-shadow: 0px 0px 16px 2px #fff;
+            box-shadow: 0px 0px 16px 2px #fff;
+    -webkit-border-radius: 0 0.5em 0.5em 0;
+            border-radius: 0 0.5em 0.5em 0;
+    font-size: 175%;
+    position: absolute;
+    bottom: 1em; left: 0em;
+    padding: 0.25em 0.5em;
 }
 
 #info {
-	width: 250px;
-	float: right;
+    color: #fff;
+    background-color: #000;
+    -webkit-box-shadow: 0px 0px 8px 2px #fff;
+            box-shadow: 0px 0px 8px 2px #fff;
+    -webkit-border-radius: 0 0 0.5em 0.5em;
+            border-radius: 0 0 0.5em 0.5em;
+    position: absolute;
+    top: 0; right: 1em;
+    width: 16em;
+    padding: 0.5em;
 }
 #info #showhide {
-	float: right;
-	margin: 0;
+    float: right;
+    margin: 0;
 }
 #info h2 {
-	margin: 0;
+    margin: 0;
 }
 #info h3 {
-	margin-bottom: 0;
+    margin-bottom: 0;
 }
 #info p, #info ul {
-	margin-top: 0;
+    margin-top: 0;
 }
 #info ul {
-	margin-left: 1.5em;
-	padding-left: 0;
+    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;
+    position: absolute;
+    top: 50%; left: 50%;
+    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;
 }
diff --git a/skyfall/index.html b/skyfall/index.html
@@ -1,34 +1,39 @@
-<!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">
+<!DOCTYPE html>
+<html>
  <head>
-  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <meta 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>
+  <link rel="stylesheet" href="/map/tube/lib/leaflet.css">
+  <!--[if lte IE 8]>
+    <link rel="stylesheet" href="/map/tube/lib/leaflet.ie.css">
+  <![endif]-->
+  <link rel="stylesheet" href="/map/tube/lib/leaflet.label.css">
+  <link rel="stylesheet" href="/map/tube/skyfall/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>
+  <script 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> -->
+ <body>
+
+  <div id="map"><div style="padding: 1em; color: gray;">Loading...</div></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.
+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="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 id="showhide"><a href="" onclick="Info.Hide(); return false;">Hide &uarr;</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>