Draw a Car Route in MapLibre GL JS
This example calculates a car route between two points and draws it on a MapLibre GL map. Each turn instruction is shown as a clickable marker with a popup.
Dependencies: mapbox-polyline
let map = new maplibregl.Map({
container: "map",
style: "https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=YOUR_API_KEY",
center: [11.413507, 47.270537],
zoom: 13,
});
map.on("load", () => {
let start = [11.393712, 47.259938];
let end = [11.430896, 47.28187];
let url = new URL("https://routing.maptoolkit.net/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("api_key", "YOUR_API_KEY");
fetch(url)
.then((r) => r.json())
.then((route) => {
let path = route.paths[0];
let coordinates = polyline.decode(path.points).map(c => c.reverse());
map.addLayer({
id: "route", type: "line",
source: { type: "geojson", data: { type: "Feature", geometry: { type: "LineString", coordinates } } },
layout: { "line-join": "round", "line-cap": "round" },
paint: { "line-color": "#2a3561", "line-width": 5 },
});
path.instructions.forEach((instruction) => {
let $img = document.createElement("img");
$img.src = "https://static.maptoolkit.net/sprites/toursprung/route-via.svg";
$img.width = 12; $img.height = 12; $img.style["cursor"] = "pointer";
new maplibregl.Marker({ element: $img, anchor: "center" })
.setLngLat(instruction.coordinate.reverse())
.addTo(map)
.setPopup(new maplibregl.Popup().setHTML(`<p>${instruction.text}</p>`));
});
let $img = document.createElement("img");
$img.src = "https://static.maptoolkit.net/sprites/toursprung/marker.svg";
$img.width = 29; $img.height = 30;
new maplibregl.Marker({ element: $img, anchor: "bottom" })
.setLngLat(coordinates[coordinates.length - 1])
.addTo(map);
});
});<!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/maplibre-gl@5.6.1/dist/maplibre-gl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.2.1/polyline.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.6.1/dist/maplibre-gl.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 = new maplibregl.Map({
container: "map",
style: "https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=YOUR_API_KEY",
center: [11.413507, 47.270537],
zoom: 13,
});
map.on("load", () => {
let start = [11.393712, 47.259938];
let end = [11.430896, 47.28187];
let url = new URL("https://routing.maptoolkit.net/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("api_key", "YOUR_API_KEY");
fetch(url)
.then((r) => r.json())
.then((route) => {
let path = route.paths[0];
let coordinates = polyline.decode(path.points).map(c => c.reverse());
map.addLayer({
id: "route", type: "line",
source: { type: "geojson", data: { type: "Feature", geometry: { type: "LineString", coordinates } } },
layout: { "line-join": "round", "line-cap": "round" },
paint: { "line-color": "#2a3561", "line-width": 5 },
});
path.instructions.forEach((instruction) => {
let $img = document.createElement("img");
$img.src = "https://static.maptoolkit.net/sprites/toursprung/route-via.svg";
$img.width = 12; $img.height = 12; $img.style["cursor"] = "pointer";
new maplibregl.Marker({ element: $img, anchor: "center" })
.setLngLat(instruction.coordinate.reverse())
.addTo(map)
.setPopup(new maplibregl.Popup().setHTML(`<p>${instruction.text}</p>`));
});
let $img = document.createElement("img");
$img.src = "https://static.maptoolkit.net/sprites/toursprung/marker.svg";
$img.width = 29; $img.height = 30;
new maplibregl.Marker({ element: $img, anchor: "bottom" })
.setLngLat(coordinates[coordinates.length - 1])
.addTo(map);
});
});
</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.
How it works
The API takes point as lat,lng. The arrays in this example are [lng, lat], which is why they are swapped when the URL is built.
The route geometry is an encoded polyline, not GeoJSON. path.points is a compressed
string, decoded here with a polyline library.
polyline.decode() returns [lat, lng] pairs, and MapLibre needs [lng, lat], which is
what the .map(c => c.reverse()) is for. Leave it out and the route lands in the Indian
Ocean rather than throwing.
The layer is added inside map.on("load") because a style has to exist before a layer can
attach to it.
route.paths[0] is the best route; the response returns paths as an array.
Next steps
This draws the default car route. The parameters in the
Routing API reference are where it becomes useful: routeType
for bike, foot, hike or transit, alternative routes when the user should choose, and GPX or
KML when the route has to be exported.
Two things pair naturally with a drawn route. The Elevation API turns the same geometry into a climb profile, which is most of the value for anything outdoor, and colouring the line by surface shows where the asphalt ends rather than drawing one flat colour.