Bio
B'log
Research
Teaching

Difference between revisions of "Web Element: Map"
Line 1: Line 1:
 
<html>
 
<html>
 +
 
<head>
 
<head>
−
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
+
  <meta charset='utf-8' />
−
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
+
  <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 -->
 +
  <div id='map'></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>
 +
    // 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: [-77.0369, 38.895], // Specify the starting position
 +
      zoom: 11.5, // Specify the starting zoom
 +
    });
 +
 
 +
    // 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;
 +
 
 +
    // 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'
 +
    });
  
−
<div class='absolute fl my24 mx24 py24 px24 bg-gray-faint round'>
+
     // Create a LngLat object to use in the marker initialization
−
  <form id='params'>
+
     // https://docs.mapbox.com/mapbox-gl-js/api/#lnglat
−
     <h4 class='txt-m txt-bold mb6'>Chose a travel mode:</h4>
+
     var lngLat = {
−
     <div class='mb12 mr12 toggle-group align-center'>
+
       lon: lon,
−
      <label class='toggle-container'>
+
       lat: lat
−
        <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>
 
  
 +
    map.on('load', function() {
 +
      // When the map loads, add the source and layer
 +
      map.addSource('iso', {
 +
        type: 'geojson',
 +
        data: {
 +
          "type": 'FeatureCollection',
 +
          "features": []
 +
        }
 +
      });
  
−
<script>
+
      map.addLayer({
−
mapboxgl.accessToken = 'pk.eyJ1Ijoia2lsdGVyIiwiYSI6IkEyNkVMb3cifQ.S4BPGK9G2NnoopYXnqAK7g';
+
        'id': 'isoLayer',
−
var map = new mapboxgl.Map({
+
        'type': 'fill',
−
container: 'map', // container id
+
        // Use "iso" as the data source for this layer
−
style: 'mapbox://styles/mapbox/streets-v11',
+
        'source': 'iso',
−
center: [27.142826, 38.423733], // starting position
+
        'layout': {},
−
zoom: 10 // starting zoom
+
        'paint': {
−
});
+
          // The fill color for the layer is set to a light purple
−
+
          'fill-color': '#5a3fc0',
−
// Add zoom and rotation controls to the map.
+
          'fill-opacity': 0.3
−
map.addControl(new mapboxgl.NavigationControl());
+
        }
 +
      }, "poi-label");
  
−
// // Create variables to use in getIso()
+
      // Initialize the marker at the query coordinates
−
var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';
+
      marker.setLngLat(lngLat).addTo(map);
−
var lon = -77.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
+
      // Make the API call
−
function getIso() {
+
      getIso();
−
  var query = urlBase + profile + '/' + lon + ',' + lat + '?contours_minutes=' + minutes + '&polygons=true&access_token=' + mapboxgl.accessToken;
+
    });
  
−
  $.ajax({
+
     // Target the "params" form in the HTML portion of your code
−
     method: 'GET',
+
     var params = document.getElementById('params');
−
     url: query
 
−
  }).done(function(data) {
 
−
    console.log(data);
 
−
  })
 
−
};
 
  
−
// Call the getIso function
+
    // 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
−
// You will remove this later - it's just here so you can see the console.log results in this step
+
    params.addEventListener('change', function(e) {
−
getIso();
+
      if (e.target.name === 'profile') {
−
</script>
+
        profile = e.target.value;
 +
        getIso();
 +
      } else if (e.target.name === 'duration') {
 +
        minutes = e.target.value;
 +
        getIso();
 +
      }
 +
    });
 +
  </script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 20:56, 17 May 2020

Get started with the Isochrone API

Chose a travel mode:

Chose a maximum duration:

Retrieved from "https://hkilter.com/index.php?title=Web_Element:_Map&oldid=2019"

hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

© 2020 H. K. Ilter