1 files changed, 92 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6c4f756
--- /dev/null
+++ b/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8 />
+<title>Southampton History Map</title>
+<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+
+<script src='leaflet.js'></script>
+<link href='leaflet.css' rel='stylesheet' />
+<style>
+  body { margin:0; padding:0; }
+  #map { position:absolute; top:0; bottom:0; width:100%; }
+
+  .info {
+        width: 30%;
+        padding: 6px 8px;
+        margin-top: 30px !important;
+        font: 14px/16px Arial, Helvetica, sans-serif;
+        background: white;
+        background: rgba(255,255,255,1);
+        box-shadow: 0 0 15px rgba(0,0,0,0.2);
+        border-radius: 5px;
+  }
+.range {
+  position:absolute;
+  width:98%;
+  }
+.leaflet-top .leaflet-control-zoom {
+  top:20px;
+  }
+
+</style>
+</head>
+<body>
+
+<div id='map'></div>
+<input id='range' class='range' type='range' min='0' max='1.0' step='any' />
+
+<div id="description" class="info legend">
+
+<h2>Southampton History Map</h2>
+
+<p>This map shows how Southampton, and actually all of Hampshire has changed
+over approximately the last 4 years.</p>
+
+<p>To the left of the separator, you can see OpenStreetMap as of (now), and on
+the right, you can see it as of 2011.</p>
+
+</div>
+
+<script>
+
+    var map = L.map('map');
+
+    var old = L.tileLayer('//{s}.tile.cbaines.net/hampshire-111005/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+        maxZoom: 19
+    }).addTo(map);
+
+    var overlay = L.tileLayer('//{s}.tile.cbaines.net/osm_tiles/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+        maxZoom: 19
+    }).addTo(map);
+
+    var range = document.getElementById('range');
+
+    function clip() {
+        var nw = map.containerPointToLayerPoint([0, 0]),
+            se = map.containerPointToLayerPoint(map.getSize()),
+            clipX = nw.x + (se.x - nw.x) * range.value;
+
+        overlay.getContainer().style.clip = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
+    }
+
+    range['oninput' in range ? 'oninput' : 'onchange'] = clip;
+    map.on('move', clip);
+
+    map.setView([50.9287, -1.3960], 13);
+
+    clip();
+
+    var legend = L.control({position: 'topright'});
+
+    legend.onAdd = function(map) {
+        return document.getElementById("description");
+    };
+
+    legend.addTo(map);
+</script>
+
+</body>
+</html>