Created
April 21, 2021 23:42
-
-
Save jennynottingham/7829d93b8a6ba578e883e962dd7dbc23 to your computer and use it in GitHub Desktop.
Nextdoor
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 lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Demo: Get started with the Isochrone API</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <!-- Mapbox GL JS --> | |
| <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script> | |
| <link | |
| href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" | |
| rel="stylesheet" | |
| /> | |
| <!-- Mapbox Assembly --> | |
| <link | |
| href="https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.min.css" | |
| rel="stylesheet" | |
| /> | |
| <script src="https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.js"></script> | |
| <!-- jQuery --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #map { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div class="absolute fl my24 mx24 py24 px24 bg-gray-faint round"> | |
| <form id="params"> | |
| <h4 class="txt-m txt-bold mb6">Choose a travel mode:</h4> | |
| <div class="mb12 mr12 toggle-group align-center"> | |
| <label class="toggle-container"> | |
| <input name="profile" type="radio" value="walking" /> | |
| <div class="toggle toggle--active-null toggle--null">Walking</div> | |
| </label> | |
| <label class="toggle-container"> | |
| <input name="profile" type="radio" value="cycling" checked /> | |
| <div class="toggle toggle--active-null toggle--null">Cycling</div> | |
| </label> | |
| <label class="toggle-container"> | |
| <input name="profile" type="radio" value="driving" /> | |
| <div class="toggle toggle--active-null toggle--null">Driving</div> | |
| </label> | |
| </div> | |
| <h4 class="txt-m txt-bold mb6">Choose a maximum duration:</h4> | |
| <div class="mb12 mr12 toggle-group align-center"> | |
| <label class="toggle-container"> | |
| <input name="duration" type="radio" value="10" checked /> | |
| <div class="toggle toggle--active-null toggle--null">10 min</div> | |
| </label> | |
| <label class="toggle-container"> | |
| <input name="duration" type="radio" value="20" /> | |
| <div class="toggle toggle--active-null toggle--null">20 min</div> | |
| </label> | |
| <label class="toggle-container"> | |
| <input name="duration" type="radio" value="30" /> | |
| <div class="toggle toggle--active-null toggle--null">30 min</div> | |
| </label> | |
| </div> | |
| </form> | |
| </div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiamVubnlub3R0aW5naGFtIiwiYSI6ImNqY2F3dnU0djB3YmkycW81ZWdvNnF6cjcifQ.L3oEWYqpIwkjelfsH8LY_Q'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', // container id | |
| style: 'mapbox://styles/jennynottingham/ckns0i0z5172w17o020o0z4d1', // stylesheet | |
| center: [-77.0369,38.895], // starting position [lng, lat] | |
| zoom: 11.5 // starting zoom | |
| }); | |
| // Target the params form in the HTML | |
| var params = document.getElementById('params'); | |
| // Create variables to use in getIso() | |
| var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/'; | |
| var lon = -77.034; | |
| var lat = 38.899; | |
| var profile = 'cycling'; | |
| var minutes = 10; | |
| // Set up a marker that you can use to show the query's coordinates | |
| var marker = new mapboxgl.Marker({ | |
| 'color': '#90ee90' | |
| }); | |
| // Create a LngLat object to use in the marker initialization | |
| // https://docs.mapbox.com/mapbox-gl-js/api/#lnglat | |
| var lngLat = { | |
| lon: lon, | |
| lat: lat | |
| }; | |
| // Create a function that sets up the Isochrone API query then makes an Ajax call | |
| function getIso() { | |
| var query = | |
| urlBase + | |
| profile + | |
| '/' + | |
| lon + | |
| ',' + | |
| lat + | |
| '?contours_minutes=' + | |
| minutes + | |
| '&polygons=true&access_token=' + | |
| mapboxgl.accessToken; | |
| $.ajax({ | |
| method: 'GET', | |
| url: query | |
| }).done(function (data) { | |
| // Set the 'iso' source's data to what's returned by the API query | |
| map.getSource('iso').setData(data); | |
| }); | |
| } | |
| // When a user changes the value of profile or duration by clicking a button, change the parameter's value and make the API query again | |
| params.addEventListener('change', function (e) { | |
| if (e.target.name === 'profile') { | |
| profile = e.target.value; | |
| getIso(); | |
| } else if (e.target.name === 'duration') { | |
| minutes = e.target.value; | |
| getIso(); | |
| } | |
| }); | |
| map.on('load', function () { | |
| // When the map loads, add the source and layer | |
| map.addSource('iso', { | |
| type: 'geojson', | |
| data: { | |
| 'type': 'FeatureCollection', | |
| 'features': [] | |
| } | |
| }); | |
| map.addLayer( | |
| { | |
| 'id': 'isoLayer', | |
| 'type': 'fill', | |
| 'source': 'iso', | |
| 'layout': {}, | |
| 'paint': { | |
| 'fill-color': '#000000', | |
| 'fill-opacity': 0.3 | |
| } | |
| }, | |
| 'poi-label' | |
| ); | |
| // Initialize the marker at the query coordinates | |
| marker.setLngLat(lngLat).addTo(map); | |
| // Make the API call | |
| getIso(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment