Leaflet

Draw an Isochrone Polygon in 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.

let map = L.map("map").setView([48.208266, 16.372182], 15);
    L.tileLayer("https://rtc-cdn.maptoolkit.net/rtc/maptoolkit-maptoolkit.summer/{z}/{x}/{y}{ratio}.png?api_key=YOUR_API_KEY", {
      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);
    let point = [48.208830, 16.372493];
    let url = new URL("https://routing.maptoolkit.net/isochrone");
    url.searchParams.append("time", 10);
    url.searchParams.append("point", point.join(","));
    url.searchParams.append("routeType", "foot");
    url.searchParams.append("api_key", "YOUR_API_KEY");
    fetch(url)
      .then((r) => r.json())
      .then((polygon) => {
        new L.Polygon(polygon, { interactive: false, color: "#2a3561", fillOpacity: 0.2, weight: 2 }).addTo(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>
    let map = L.map("map").setView([48.208266, 16.372182], 15);
    L.tileLayer("https://rtc-cdn.maptoolkit.net/rtc/maptoolkit-maptoolkit.summer/{z}/{x}/{y}{ratio}.png?api_key=YOUR_API_KEY", {
      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);
    let point = [48.208830, 16.372493];
    let url = new URL("https://routing.maptoolkit.net/isochrone");
    url.searchParams.append("time", 10);
    url.searchParams.append("point", point.join(","));
    url.searchParams.append("routeType", "foot");
    url.searchParams.append("api_key", "YOUR_API_KEY");
    fetch(url)
      .then((r) => r.json())
      .then((polygon) => {
        new L.Polygon(polygon, { interactive: false, color: "#2a3561", fillOpacity: 0.2, weight: 2 }).addTo(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>

Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.

Use the Maptoolkit Connector. Create an interactive map centered around [16.372493, 48.20883] with an Isochrone for 10 minutes walking time around the center, using Leaflet.

How it works

time is in minutes, and 60 is the maximum: above that the service returns 400 with Parameter 'time' must not exceed 60 minutes.

routeType decides the shape as much as the time does. A 10 minute foot isochrone is a small blob; the same 10 minutes as car reaches across a city and follows the road network outward, so the polygon is much less round.

The response is a bare array of [lat, lng] pairs, not GeoJSON. Leaflet also works in [lat, lng], so new L.Polygon(polygon) consumes it directly with no conversion. The MapLibre version of this example has to reverse every pair and wrap the result in a Feature.

interactive: false on both the polygon and the marker keeps them from swallowing clicks meant for the map underneath.

Next steps

The two parameters that change the answer are time and routeType. Ten minutes on foot and ten by car are different questions, and stacking several times as separate polygons is how most reachability maps are actually built: three bands shaded from dark to light read better than one outline.

From there the useful step is usually combining the polygon with your own data, testing which of your locations fall inside it. That is a point-in-polygon check on the response rather than anything Maptoolkit provides, and it is what turns a shape into an answer.

MapLibre GL JS