Example: Isochrone Distance

SmartMaps can calculate isochrones. In this example, by clicking on the map, the reachable distance is entered.

The example is complete; you can save it locally in a file and call it in the browser. You only have to replace the value for the apiKey.

Click on the map to trigger the calculation of the isochrone for the selected point.

SmartMaps-Map

Code-Example: Isochrone Distance

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Isochrone: Distance</title>
</head>

<body>
  <div id="map-wrapper">
      <form id="isochrone-form">
        <fieldset>
          <legend>Isochrone: Distance</legend>
          <label>
              Distance in meter: (Default: 120000m):
              <input id="meterInput" type="text" value="30000" placeholder="Distance">
            </label>
          <label>
              Gridsize: (Default: 40, max value: 150):
              <input id="gridInput" type="text" value="40" placeholder="Gridsize">
            </label>
          <label>
            Speed Profil:  
			<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>
	<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={API_KEY}"></script>
  <script>
    ym.ready(function(modules) {
      var geocodingForm = document.getElementById('location-form');

      //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);
	  //Wenn GeoJSON Layer added check if if full 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,
			distanceInMeters: parseInt(document.getElementById("meterInput").value),
			isochroneGrid: parseInt(document.getElementById("gridInput").value),
			speedProfile: document.getElementById("profilInput").value
		});		
	  }));

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