Difference between revisions of "Web Element: Map"
(Created page with "<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Get started with the Isochrone API</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,...") |
|||
(21 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
Line 11: | Line 10: | ||
<!-- Import Assembly --> | <!-- Import Assembly --> | ||
<link href='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.min.css' rel='stylesheet'> | <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> | + | <script src='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.js'> </script> |
<!-- Import jQuery --> | <!-- Import jQuery --> | ||
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> | <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> | ||
Line 32: | Line 31: | ||
<body> | <body> | ||
<!-- Create a container for the map --> | <!-- Create a container for the map --> | ||
− | <div id='map'></div> | + | <div id='map' style='width: 828px; height: 600px;'></div> |
+ | |||
+ | <!-- Create a sidebar with buttons for each option --> | ||
+ | <div class='absolute fl my24 mx24 py24 px24 bg-gray-faint round'> | ||
+ | <form id='params'> | ||
+ | <h4 class='txt-m txt-bold mb6'>Chose 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'>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> | <script> | ||
Line 40: | Line 74: | ||
container: 'map', // Specify the container ID | container: 'map', // Specify the container ID | ||
style: 'mapbox://styles/mapbox/streets-v11', // Specify which map style to use | style: 'mapbox://styles/mapbox/streets-v11', // Specify which map style to use | ||
− | center: [ | + | center: [27.0369, 38.895], // Specify the starting position |
− | zoom: | + | 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> | </script> |
hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
© 2020 H. K. Ilter