Example: Isochrone Period of Time

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.

SmartMaps-Map

Code Example: Isochrone Period of Time

<!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 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=kVswlU9usEjJ1Ex5NszEZz5m8aWwRKzP%2FnVvi2pAnQE%3D"></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);
		//Kartenauschnitt anpassen wenn Isochrone nicht komplett sichtbar
	  });
	  
	  //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>