Built with blockbuilder.org
Created
May 5, 2017 07:50
-
-
Save anonymous/1823b73827fa312e8aa119ffbe488cc6 to your computer and use it in GitHub Desktop.
fresh block
This file contains 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 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', | |
| center: [144.96,-37.8], | |
| zoom: 15.5 | |
| }); | |
| var years = [ 2014,2015,2016 ]; | |
| var curYear = 2016; | |
| function filterBy(year) { | |
| map.setLayoutProperty('canopies-' + curYear, 'visibility', 'none'); | |
| curYear = year; | |
| map.setLayoutProperty('canopies-' + curYear, 'visibility','visible'); | |
| // document.getElementById('month').textContent = months[month]; | |
| } | |
| 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