Bio
B'log
Research
Teaching

Difference between revisions of "Web Element: Map"
 
(19 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.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>
 +
  <!-- Create a container for the map -->
 +
  <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>
 +
    // 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>

Latest revision as of 20:59, 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=2021"

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

© 2020 H. K. Ilter