<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 src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.1.1/polyline.min.js"></script>
<script>
// Initialize Leaflet map
let map = L.map("map").setView([47.270537, 11.413507], 14);
// Add Maptoolkit tiles as L.tileLayer
L.tileLayer("https://maptoolkit.p.rapidapi.com/tiles/{z}/{x}/{y}/terrain.png?rapidapi-key=your-api-key{ratio}", {
ratio: L.Browser.retina ? "&ratio=2" : "",
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 route from Routing API
let start = [11.393712, 47.259938],
end = [11.430896, 47.28187];
let url = new URL("https://maptoolkit.p.rapidapi.com/route");
url.searchParams.append("point", `${start[1]},${start[0]}`);
url.searchParams.append("point", `${end[1]},${end[0]}`);
url.searchParams.append("routeType", "car");
url.searchParams.append("rapidapi-key", "your-api-key");
fetch(url)
.then((r) => r.json())
.then((route) => {
let path = route.paths[0];
// Add route polyline to map
let coordinates = polyline.decode(path.points);
new L.Polyline(coordinates, { color: "#2a3561", weight: 5 }).addTo(map);
// Add instruction markers with popup to map
path.instructions.forEach((instruction) => {
let marker = new L.Marker(instruction.coordinate, {
icon: new L.Icon({
iconUrl: "https://static.maptoolkit.net/sprites/maptoolkit/route-via.svg",
iconSize: [12, 12],
iconAnchor: [6, 6],
}),
}).addTo(map);
marker.bindPopup(L.popup().setContent(`<p>${instruction.text}</p>`));
});
// Add route end marker
new L.Marker(coordinates[coordinates.length - 1], {
interactive: false,
icon: new L.Icon({
iconUrl: "https://static.maptoolkit.net/sprites/maptoolkit/marker.svg",
iconSize: [30, 29],
iconAnchor: [15, 29],
}),
}).addTo(map);
});
</script>
</body>
</html>
