Isochrone: Zeitspanne

SmartMaps kann Isochrone berechnen. In diesem Beispiel werden durch Klick auf die Karte die erreichbare Entfernung eingetragen.

Das Beispiel ist vollständig; Sie können es lokal in einer Datei abspeichern und im Browser aufrufen. Sie müssen lediglich den Wert für den apiKey ersetzen.

Klicken Sie auf die Karte, um die Berechnung der Isochrone für den gewählten Punkt auszulösen.

SmartMaps-Karte

Codebeispiel: Isochrone Zeitspanne

<!DOCTYPE html>
<html>

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

<body>
  <div id="map-wrapper">
      <form id="isochrone-form">
        <fieldset>
          <legend>Isochrone: Minutes</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={API_KEY}"></script>
  <script>
    ym.ready(function(modules) {
      var geocodingForm = document.getElementById('location-form');

      //Karte initalisieren.
      var map = ym.map("map", {
        center: ym.latLng(49.021273, 8.439316),
        zoom: 14
      });
	  
      //GeoJSON Layer initalisieren und in Karte einzeichnen
      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());
		}
	  });

	  
	  //Isochrone initalisieren
	  var routing = new ym.services.Routing(); 
	  
	  //Isochrone bei erfolgreicher Abfrage einzeichnen
	  routing.on('success', function (request, response) {
		isochroneLayer.clearLayers();
		isochroneLayer.addData(response.body);
		//Kartenauschnitt anpassen wenn Isochrone nicht komplett sichtbar
	  });
	  
	  //Isochrone bei Click auf Karte berechnen
	  map.on("click", _.debounce(function (e) {
	  	let marker = L.marker(e.latlng).addTo(isochroneLayer);
			marker.bindPopup("Daten werden geladen!").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>