Examples

Isochrone Routing with MapLibre GL

This example fetches a 10-minute walking isochrone area for a point in Vienna and draws it as a filled polygon on a MapLibre GL map.

// Initialize MapLibreGL map
    let map = new maplibregl.Map({
      container: "map",
      style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=toursprung",
      center: [16.372182, 48.208266],
      zoom: 14,
    });
    map.on("load", () => {
      // Get isochrone routing 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", "toursprung");

      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;
          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();
        });
    });

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.3/dist/maplibre-gl.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.3/dist/maplibre-gl.css" />
  <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
<div id="map"></div>
  <script>
    // Initialize MapLibreGL map
    let map = new maplibregl.Map({
      container: "map",
      style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=toursprung",
      center: [16.372182, 48.208266],
      zoom: 14,
    });
    map.on("load", () => {
      // Get isochrone routing 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", "toursprung");

      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;
          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>

Isochrone Routing with Leaflet

This example fetches a 10-minute walking isochrone area for a point in Vienna and draws it as a polygon on a Leaflet map.

// Initialize Leaflet map
    let map = L.map("map").setView([48.208266, 16.372182], 15);
    // Add Maptoolkit tiles as L.tileLayer
    L.tileLayer("https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}{ratio}.png?api_key=toursprung", {
      ratio: L.Browser.retina ? "@2x" : "",
      maxZoom: 18,
      attribution:
        "© <a href='https://www.maptoolkit.com' target='_blank'>Maptoolkit</a> \
        © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OSM</a>",
    }).addTo(map);
    
    // Get isochrone from Routing API
    let point = [48.208830, 16.372493];
    let url = new URL("https://routing.maptoolkit.net/isochrone");
    url.searchParams.append("time", 10); // minutes
    url.searchParams.append("point", point.join(","));
    url.searchParams.append("routeType", "foot");
    url.searchParams.append("api_key", "toursprung");

    fetch(url)
      .then((r) => r.json())
      .then((polygon) => {
        // Add isochrone polygon to map
        new L.Polygon(polygon, { interactive: false, color: "#2a3561", fillOpacity: 0.2, weight: 2 }).addTo(map);
        // Add isochrone marker to map
        new L.Marker(point, {
          interactive: false,
          icon: new L.Icon({
            iconUrl: "https://static.maptoolkit.net/sprites/toursprung/marker.svg",
            iconSize: [30, 29],
            iconAnchor: [15, 29],
          }),
        }).addTo(map).bindPopup(L.popup({ offset: [0, -20] }).setContent("Within a 10 minute walking distance")).openPopup();
      });

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css" />
  <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // Initialize Leaflet map
    let map = L.map("map").setView([48.208266, 16.372182], 15);
    // Add Maptoolkit tiles as L.tileLayer
    L.tileLayer("https://rtc-cdn.maptoolkit.net/rtc/toursprung-terrain/{z}/{x}/{y}{ratio}.png?api_key=toursprung", {
      ratio: L.Browser.retina ? "@2x" : "",
      maxZoom: 18,
      attribution:
        "© <a href='https://www.maptoolkit.com' target='_blank'>Maptoolkit</a> \
        © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OSM</a>",
    }).addTo(map);
    
    // Get isochrone from Routing API
    let point = [48.208830, 16.372493];
    let url = new URL("https://routing.maptoolkit.net/isochrone");
    url.searchParams.append("time", 10); // minutes
    url.searchParams.append("point", point.join(","));
    url.searchParams.append("routeType", "foot");
    url.searchParams.append("api_key", "toursprung");

    fetch(url)
      .then((r) => r.json())
      .then((polygon) => {
        // Add isochrone polygon to map
        new L.Polygon(polygon, { interactive: false, color: "#2a3561", fillOpacity: 0.2, weight: 2 }).addTo(map);
        // Add isochrone marker to map
        new L.Marker(point, {
          interactive: false,
          icon: new L.Icon({
            iconUrl: "https://static.maptoolkit.net/sprites/toursprung/marker.svg",
            iconSize: [30, 29],
            iconAnchor: [15, 29],
          }),
        }).addTo(map).bindPopup(L.popup({ offset: [0, -20] }).setContent("Within a 10 minute walking distance")).openPopup();
      });
  </script>
</body>
</html>

API Reference