summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChristopher Baines <mail@cbaines.net>2015-04-08 09:55:45 +0100
committerChristopher Baines <mail@cbaines.net>2015-04-08 12:24:21 +0100
commit174b1a7f12e6640f9ae778da8219a22e2c6b49f2 (patch)
tree5786b4409285bda95fd76086a6de2b94e32bb9ae
downloadsouthampton-history-map-master.tar
southampton-history-map-master.tar.gz
Initial commitHEADmaster
-rw-r--r--index.html92
l---------leaflet.css1
l---------leaflet.js1
3 files changed, 94 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>
diff --git a/leaflet.css b/leaflet.css
new file mode 120000
index 0000000..40a1f03
--- /dev/null
+++ b/leaflet.css
@@ -0,0 +1 @@
+/usr/share/javascript/leaflet/leaflet.css \ No newline at end of file
diff --git a/leaflet.js b/leaflet.js
new file mode 120000
index 0000000..f0df49d
--- /dev/null
+++ b/leaflet.js
@@ -0,0 +1 @@
+/usr/share/javascript/leaflet/leaflet.js \ No newline at end of file