Difference between revisions of "Web Element: Map"
(14 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | |||
<head> | <head> | ||
− | <script src='https://api.mapbox.com/mapbox-gl-js/v1. | + | <meta charset='utf-8' /> |
− | <link href='https://api.mapbox.com/mapbox-gl-js/v1. | + | <title>Get started with the Isochrone API</title> |
+ | <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | ||
+ | <!-- Import Mapbox GL JS --> | ||
+ | <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js'></script> | ||
+ | <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css' rel='stylesheet' /> | ||
+ | <!-- Import 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> | ||
+ | <!-- Import 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> | </head> | ||
<body> | <body> | ||
− | <div id='map' style='width: 828px; height: 600px;'></div> | + | <!-- Create a container for the map --> |
− | <script> | + | <div id='map' style='width: 828px; height: 600px;'></div> |
− | + | ||
− | var map = new mapboxgl.Map({ | + | <!-- Create a sidebar with buttons for each option --> |
− | container: 'map', // container | + | <div class='absolute fl my24 mx24 py24 px24 bg-gray-faint round'> |
− | style: 'mapbox://styles/mapbox/streets-v11', | + | <form id='params'> |
− | center: [ | + | <h4 class='txt-m txt-bold mb6'>Chose a travel mode:</h4> |
− | zoom: | + | <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> |
− | map. | + | </label> |
− | </script> | + | <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'>Chose 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> | ||
+ | </form> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | // Add your Mapbox access token | ||
+ | mapboxgl.accessToken = 'pk.eyJ1Ijoia2lsdGVyIiwiYSI6IkEyNkVMb3cifQ.S4BPGK9G2NnoopYXnqAK7g'; | ||
+ | var map = new mapboxgl.Map({ | ||
+ | container: 'map', // Specify the container ID | ||
+ | style: 'mapbox://styles/mapbox/streets-v11', // Specify which map style to use | ||
+ | center: [27.0369, 38.895], // Specify the starting position | ||
+ | zoom: 13, // Specify the starting zoom | ||
+ | }); | ||
+ | |||
+ | // Create variables to use in getIso() | ||
+ | var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/'; | ||
+ | var lon = 27.034; | ||
+ | var lat = 38.899; | ||
+ | var profile = 'cycling'; | ||
+ | var minutes = 10; | ||
+ | |||
+ | // 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); | ||
+ | }) | ||
+ | }; | ||
+ | |||
+ | var marker = new mapboxgl.Marker({ | ||
+ | 'color': '#314ccd' | ||
+ | }); | ||
+ | |||
+ | // 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 | ||
+ | }; | ||
+ | |||
+ | 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', | ||
+ | // Use "iso" as the data source for this layer | ||
+ | 'source': 'iso', | ||
+ | 'layout': {}, | ||
+ | 'paint': { | ||
+ | // The fill color for the layer is set to a light purple | ||
+ | 'fill-color': '#5a3fc0', | ||
+ | 'fill-opacity': 0.3 | ||
+ | } | ||
+ | }, "poi-label"); | ||
+ | |||
+ | // Initialize the marker at the query coordinates | ||
+ | marker.setLngLat(lngLat).addTo(map); | ||
+ | |||
+ | // Make the API call | ||
+ | getIso(); | ||
+ | }); | ||
+ | |||
+ | // Target the "params" form in the HTML portion of your code | ||
+ | var params = document.getElementById('params'); | ||
+ | |||
+ | // 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(); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
© 2020 H. K. Ilter