diff options
| author | Christopher Baines <mail@cbaines.net> | 2015-04-08 09:55:45 +0100 |
|---|---|---|
| committer | Christopher Baines <mail@cbaines.net> | 2015-04-08 12:24:21 +0100 |
| commit | 174b1a7f12e6640f9ae778da8219a22e2c6b49f2 (patch) | |
| tree | 5786b4409285bda95fd76086a6de2b94e32bb9ae /index.html | |
| download | southampton-history-map-174b1a7f12e6640f9ae778da8219a22e2c6b49f2.tar southampton-history-map-174b1a7f12e6640f9ae778da8219a22e2c6b49f2.tar.gz | |
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 92 |
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: '© <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: '© <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> |