Built with blockbuilder.org
forked from anonymous's block: fresh block
Last active
May 5, 2017 08:03
-
-
Save stevage/4a604a3c323338b99b2ed89bd3ec2c72 to your computer and use it in GitHub Desktop.
Melbourne canopy 2014-16
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment