Isochrone API

 

Die Maptoolkit Isochrone API ist eine innovative und beeindruckende Möglichkeit, zu zeigen, was von einem bestimmten Standort aus erreichbar ist. Genauer gesagt ist eine Isochrone ein Polygon, das den Bereich darstellt, der von einem bestimmten Standort innerhalb einer bestimmten Zeit erreicht werden kann. Die Maptoolkit Isochrone API funktioniert mit verschiedenen Verkehrsmitteln wie Gehen, Radfahren oder Autofahren.

Beispiel

Isochrone with MapLibreGL map

<html>
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://static.maptoolkit.net/css/maplibre-gl.css" />
  <style>
    body { width: 100%; height: 100%; padding: 0; margin: 0; font-family: Arial, sans-serif; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
  <script>
    // Initialize MapLibreGL map
    let map = new maplibregl.Map({
      container: "map",
      style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=your_api_key",
      center: [16.372182, 48.208266],
      zoom: 14,
    });
    map.on("load", () => {
      // Get Isochrone from Routing API
      let point = [16.372493, 48.20883];
      let url = new URL("https://routing.maptoolkit.net/isochrone");
      url.searchParams.append("time", 10); // minutes
      url.searchParams.append("point", `${point[1]},${point[0]}`);
      url.searchParams.append("routeType", "foot");
      url.searchParams.append("api_key", "your_api_key");
      fetch(url)
        .then((r) => r.json())
        .then((polygon) => {
          // Add data to map sources
          map.addSource("isochrone", {
              type: "geojson",
              data: {
                type: "Feature",
                geometry: {
                  type: "Polygon",
                  coordinates: [polygon.map((latLng) => latLng.reverse())],
                },
              },
            });
          // Add isochrone polygon to map (fill and outline)
          map.addLayer({
              id: "isochrone-fill",
              type: "fill",
              source: "isochrone",
              paint: {
                "fill-color": "#2a3561",
                "fill-opacity": 0.2,
              },
            });
          map.addLayer({
              id: "isochrone-line",
              type: "line",
              source: "isochrone",
              layout: {
                "line-join": "round",
                "line-cap": "round",
              },
              paint: {
                "line-color": "#2a3561",
                "line-width": 2,
              },
            });
          // Add isochrone marker to map
          let $img = document.createElement("img");
          $img.src = "https://static.maptoolkit.net/sprites/toursprung/marker.svg";
          $img.width = 29;
          $img.height = 30;
          let marker = new maplibregl.Marker({
            element: $img,
            anchor: "bottom",
          })
            .setLngLat(point)
            .addTo(map)
            .setPopup(new maplibregl.Popup({ offset: 30 }).setHTML("<p>Within a 10 minute walking distance</p>"))
            .togglePopup();
        });
    });
  </script>
</body>
</html>
 

 
Documentation