Skip to content

Isochrone Period of Time Calculation

SmartMaps can calculate isochrones. In this example, by clicking on the map, the reachable area within a specified period of time is calculated. The example is complete; you can save it locally in a file and open it in the browser. You only have to replace the value for the apiKey.

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Isochrone: Period of Time</title>
</head>
<body>
  <div id="map-wrapper">
    <form id="isochrone-form">
      <fieldset>
        <legend>Isochrone: Period of Time</legend>
        <label>
            Interval in min (from > 0 to <= 60 min) (Default: 30 min):
            <input id="minutesInput" type="text" value="30" placeholder="Distance">
        </label>
        <label>
            Gridsize: (Default: 40, max value: 150):
            <input id="gridInput" type="text" value="40" placeholder="Gridsize">
        </label>
        <label>
          Speed Profile:  
          <select id="profilInput">
            <option value="FAST" selected="selected">Car - Fast</option>
            <option value="SLOW">Car - Slow</option>
            <option value="BICYCLE">Bicycle</option>
            <option value="PEDESTRIAN">Pedestrian</option>
          </select>
        </label>
      </fieldset>
    </form>
    <div id="map" style="height: 400px; width: 500px;"></div>
  </div>

  <!-- SmartMaps-API -->
  <script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey=kVswlU9usEjJ1Ex5NszEZz5m8aWwRKzP%2FnVvi2pAnQE%3D"></script>
  <script>
    ym.ready(function(modules) {
      // Initialise Map
      var map = ym.map("map", {
        center: ym.latLng(49.021273, 8.439316),
        zoom: 14
      });

      // Initialise GeoJSON layer and draw it to the map
      var isochroneLayer = ym.geoJson();
      isochroneLayer.addTo(map);

      // When GeoJSON Layer added, check if it is fully fitted to the map
      isochroneLayer.on('add', (e) => {
        if (!map.getBounds().contains(isochroneLayer.getBounds())) {
          map.fitBounds(isochroneLayer.getBounds());
        }
      });

      // Initialise isochrone
      var routing = new ym.services.Routing(); 

      // Draw isochrone after request
      routing.on('success', function (request, response) {
        isochroneLayer.clearLayers();
        isochroneLayer.addData(response.body);
      });

      // Draw isochrone on map click
      map.on("click", _.debounce(function (e) {
        let marker = L.marker(e.latlng).addTo(isochroneLayer);
        marker.bindPopup("Data loading!").openPopup();
        setTimeout(function() {
          //marker.openPopup();
        }, 200);
        routing.calcRoute([e.latlng],
        {
          type: ym.services.RoutingMode.ISOCHRONE,
          timeInMinutes: parseInt(document.getElementById("minutesInput").value),
          isochroneGrid: parseInt(document.getElementById("gridInput").value),
          speedProfile: document.getElementById("profilInput").value
        });    
      }));

    });
  </script>
</body>
</html>

Replace {API_KEY} with your actual API key to test the example locally.