<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.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/leaflet.js"></script>
<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=your_api_key", {
ratio: L.Browser.retina ? "@2x" : "",
maxZoom: 18,
attribution:
"© <a href='https://www.maptoolkit.com' target='_blank'>Toursprung</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", "your_api_key");
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>
