Melbourne canopy 2014-16

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>

.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 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>

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>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js

https://d3js.org/d3.v3.min.js