Try out routing along a path by dragging the start or end marker around.
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" />
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<style>
body { width: 100%; height: 100%; padding: 0; margin: 0; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
let apiKey = "your_api_key";
let map = new maplibregl.Map({
container: "map",
style: `https://static.maptoolkit.net/rapidapi/styles/terrain.json?api_key=${apiKey}`,
bounds: [[8.79259,47.14672],[12.45522,48.82857]],
});
map.on("load", () => {
let url = new URL("https://maptoolkit.p.rapidapi.com/enhance/route");
url.searchParams.append("gpx", "https://static.maptoolkit.net/lechradweg.gpx");
url.searchParams.append("rapidapi-key", "your-api-key");
fetch(url).then((r) => r.json()).then((data) => {
// add the routings base path to map
map.addLayer({
id: "lechradweg",
type: "line",
source: { type: "geojson", data: { type: "Feature", geometry: data.geometry } },
paint: { "line-width": 7, "line-color": "#aaa" },
});
});
createRouting();
});
// start point marker
let startImg = document.createElement("img");
startImg.src = "https://static.maptoolkit.net/sprites/maptoolkit/editor-start.svg";
startImg.height = 46;
startImg.style.cursor = "pointer";
let startMarker = new maplibregl.Marker({ element: startImg, anchor: "bottom", offset: [0, 9], draggable: true })
.setLngLat([11.13322, 48.45525])
.addTo(map)
.on("dragend", () => createRouting()); // reroute if marker is dragged
// end point marker
let endImg = document.createElement("img");
endImg.src = "https://static.maptoolkit.net/sprites/maptoolkit/editor-end.svg";
endImg.height = 46;
endImg.style.cursor = "pointer";
let endMarker = new maplibregl.Marker({ element: endImg, anchor: "bottom", offset: [0, 9], draggable: true })
.setLngLat([10.61833, 47.77144])
.addTo(map)
.on("dragend", () => createRouting()); // reroute if marker is dragged
// create routing between two points using a fixed path to route over
function createRouting() {
let url = new URL("https://maptoolkit.p.rapidapi.com/enhance/routing");
url.searchParams.append("start", startMarker.getLngLat().toArray().join());
url.searchParams.append("end", endMarker.getLngLat().toArray().join());
url.searchParams.append("gpx", "https://static.maptoolkit.net/lechradweg.gpx");
url.searchParams.append("gpx_backward", "https://static.maptoolkit.net/lechradweg_backward.gpx");
url.searchParams.append("rapidapi-key", "your-api-key");
fetch(url).then((r) => r.json()).then((data) => {
if (map.getLayer("route")) map.removeLayer("route").removeSource("route");
map.addLayer({
id: "route",
type: "line",
source: { type: "geojson", data: { type: "Feature", geometry: data.geometry } },
paint: { "line-width": 4, "line-color": "#1a96ff" },
});
});
};
</script>
</body>
</html>