Built with blockbuilder.org
forked from anonymous's block: fresh block
license: mit |
Built with blockbuilder.org
forked from anonymous's block: fresh block
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset='utf-8' /> | |
<title></title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
</style> | |
</head> | |
<body> | |
<style> | |
.map-overlay { | |
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; | |
position: absolute; | |
width: 25%; | |
top: 0; | |
left: 0; | |
padding: 10px; | |
} | |
.map-overlay .map-overlay-inner { | |
background-color: #fff; | |
box-shadow:0 1px 2px rgba(0, 0, 0, 0.20); | |
border-radius: 3px; | |
padding: 10px; | |
margin-bottom: 10px; | |
} | |
.map-overlay h2 { | |
line-height: 24px; | |
display: block; | |
margin: 0 0 10px; | |
} | |
.map-overlay .legend .bar { | |
height: 10px; | |
width: 100%; | |
background: linear-gradient(to right, #FCA107, #7F3121); | |
} | |
.map-overlay input { | |
background-color: transparent; | |
display: inline-block; | |
width: 100%; | |
position: relative; | |
margin: 0; | |
cursor: ew-resize; | |
} | |
</style> | |
<div id='map'></div> | |
<div class='map-overlay top'> | |
<div class='map-overlay-inner'> | |
<h2>Canopy by year</h2> | |
<label id='year'></label> | |
<input id='slider' type='range' min='2014' max='2016' step='1' value='2014' /> | |
</div> | |
</div> | |
<script src='//d3js.org/d3.v3.min.js' charset='utf-8'></script> | |
<script> | |
mapboxgl.accessToken = 'pk.eyJ1IjoiY2l0eW9mbWVsYm91cm5lIiwiYSI6ImNpejdob2J0czAwOWQzM21ubGt6MDVqaHoifQ.55YbqeTHWMK_b6CEAmoUlA'; | |
var map = new mapboxgl.Map({ | |
container: 'map', | |
style: 'mapbox://styles/cityofmelbourne/cj2bj51vd00252rs5nvdox5w9?update=1', | |
center: [144.96,-37.8], | |
zoom: 15.5 | |
}); | |
var years = [ 2014,2015,2016 ]; | |
var curYear = 2016; | |
function filterBy(year) { | |
map.setLayoutProperty('canopies-' + year, 'visibility','visible'); | |
map.setLayoutProperty('canopies-' + curYear, 'visibility', 'none'); | |
curYear = year; | |
document.getElementById('year').textContent = curYear; | |
} | |
map.on('load', function() { | |
document.getElementById('slider').addEventListener('input', function(e) { | |
var year = parseInt(e.target.value, 10); | |
filterBy(year); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |