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