Routing Enhancement Example

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>