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/toursprung-terrain/{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/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/toursprung-terrain/{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.