Built with blockbuilder.org
Created
November 18, 2016 21:21
-
-
Save anonymous/50dd3e6f926eaf26dec216832d5f4dd1 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 lang="en"> | |
| <head> | |
| <title>San Juan Island Geology</title> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://mapzen.com/js/mapzen.css"> | |
| <script src="https://mapzen.com/js/mapzen.min.js"></script> | |
| <script src="https://mapzen.com/tangram/tangram.min.js"></script> | |
| <style> | |
| #map { | |
| height: 100%; | |
| width: 100%; | |
| position: absolute; | |
| } | |
| html,body{margin: 0; padding: 0} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> | |
| <script> | |
| var san_juan_island = [48.5326, -123.0879]; | |
| var map = L.Mapzen.map('map', { | |
| center: san_juan_island, | |
| zoom: 12, | |
| scene: 'https://mapzen.com/api/scenes/22/62/resources/default.yaml', | |
| }); | |
| // Move zoom control to the top right corner of the map | |
| map.zoomControl.setPosition('topright'); | |
| // Mapzen Search box (replace key with your own) | |
| // To generate your own key, go to https://mapzen.com/developers/ | |
| var geocoder = L.Mapzen.geocoder('mapzen-JA21Wes'); | |
| geocoder.addTo(map); | |
| //make a map | |
| // var map = L.map('map').setView([40.4, -76.0], 13); | |
| // L.polyline([[41.21, 9.36], [41.24, 9.35], [41.23, 9.34]]).addTo(map).bindTooltip('Top tooltip following mouse', {sticky: true, direction: 'top'}); | |
| // var geojson = null; | |
| // var tooltips = []; | |
| //use osm tiles | |
| // L.tileLayer('http://b.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| // maxZoom: 18, | |
| // attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributers' | |
| // }).addTo(map); | |
| //click callback | |
| function onMapClick(e) { | |
| //build url | |
| var url = 'https://matrix.mapzen.com/isochrone?json='; | |
| var json = { | |
| locations: [{"lat":e.latlng.lat, "lon":e.latlng.lng}], | |
| costing: "auto", | |
| contours: [{"time":15},{"time":30},{"time":45},{"time":60}], | |
| polygons: false, | |
| denoise: .2, | |
| generalize: 150 | |
| }; | |
| url += escape(JSON.stringify(json)); | |
| //grab the url | |
| scene.setDataSource('isochrone_live', { type: 'GeoJSON', url: 'url' }); | |
| // $.getJSON(url,function(isochrones){ | |
| //clear this if its not null | |
| // if(geojson != null) | |
| // geojson.removeFrom(map); | |
| //clear the tooltips | |
| // tooltips.forEach(function (tooltip) { | |
| // tooltip.removeFrom(map); | |
| // }); | |
| // tooltips = []; | |
| //create the geojson object | |
| // geojson = L.geoJson(isochrones, { | |
| // style: function(feature) { | |
| // return { opacity: feature.properties.opacity * 2, | |
| // weight: 10, | |
| // color: feature.properties.color | |
| // }; | |
| // }, | |
| // onEachFeature: function(feature, layer) { | |
| // var tooltip = layer.bindTooltip(feature.properties.contour + ' min', { sticky: true }); | |
| // tooltips.push(tooltip); | |
| // tooltip.addTo(map); | |
| // } | |
| }); | |
| //render the geojson | |
| // geojson.addTo(map); | |
| }) | |
| } | |
| //hook up the callback | |
| map.on('click', onMapClick); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment