MapLibre GL JS

Draw a Car Route in MapLibre GL JS

On this page

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.

import * as maplibregl from "maplibre-gl";
    import { LogoControl } from "https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.js";

    let map = new maplibregl.Map({
      container: "map",
      attributionControl: { compact: false },
      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("points_encoded", "false");
      url.searchParams.append("api_key", "YOUR_API_KEY");

      fetch(url)
        .then((r) => r.json())
        .then((route) => {
          let path = route.paths[0];
          let coordinates = path.points.coordinates;
          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);
        });
    });

    map.addControl(new LogoControl({ variant: "com" }));

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- MapLibre GL JS 6 is an ES module. The import map tells the browser
       where to load "maplibre-gl" from. -->
  <script type="importmap">
    {
      "imports": {
        "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"
      }
    }
  </script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@6.16.0/dist/maplibre-gl.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.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 type="module">
    import * as maplibregl from "maplibre-gl";
    import { LogoControl } from "https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-logo-control@1.1.2/dist/maplibre-logo-control.js";

    let map = new maplibregl.Map({
      container: "map",
      attributionControl: { compact: false },
      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("points_encoded", "false");
      url.searchParams.append("api_key", "YOUR_API_KEY");

      fetch(url)
        .then((r) => r.json())
        .then((route) => {
          let path = route.paths[0];
          let coordinates = path.points.coordinates;
          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);
        });
    });

    map.addControl(new LogoControl({ variant: "com" }));
  </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.

Use the Maptoolkit Connector. Create an interactive map with a route from [11.393712, 47.259938] to [11.430896, 47.28187] using MapLibre GL.

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.

points_encoded=false returns the geometry as GeoJSON. By default path.points is an encoded polyline string. With the parameter set, it is a GeoJSON LineString in [lng, lat] order, which goes into the source as it is, with no decoding library.

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 or hike, 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 coloring the line by surface shows where the asphalt ends rather than drawing one flat color.