Isochrone API

 

The Maptoolkit Isochrone API is an innovative and stunning way to show what is reachable from a specific location. In more detail an isochrone is a polygon that represents the area that can be reached from a specific location within a given time. The Maptoolkit Isochrone API works with various modes of transportation like walking, biking, or driving.

Example

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