feat: add maplibre-gl-directions example

jawg · Jul 3, 2024 · 81b9af7 · 81b9af7
1 parent 82c00e6
commit 81b9af7
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -29,10 +29,12 @@ If you don't have any access token yet, get one on [Jawg Lab](https://jawg.io/la
 
 [display-route](./examples/display-route.html): Display a route on your map.
 
+[maplibre-gl-directions](./examples/maplibre-gl-directions.html): Use [maplibre-gl-directions](https://github.com/maplibre/maplibre-gl-directions) with Jawg Routing API.
+
 [draw-radius](./examples/draw-radius.html): Draw a location radius using a polygon.
 
 [add-origin-info](./examples/add-origin-info.html): Customize the request origin to add additional information.
 
 [map-session](./examples/map-session.html): Use [@jawg/map-session](https://www.npmjs.com/package/@jawg/map-session) library to support the **per-mapload** pricing.
 
-[cluster](./examples/cluster.html): Display points as cluster with user interaction.
+[cluster](./examples/cluster.html): Display points as cluster with user interaction.
diff --git a/examples/maplibre-gl-directions.html b/examples/maplibre-gl-directions.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+      }
+      #map {
+        min-height: 500px;
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script type="module">
+      import MapLibreGlDirections from "https://unpkg.com/@maplibre/maplibre-gl-directions@0.7.0/dist/maplibre-gl-directions.js";
+
+      // Don't forget to replace <YOUR_ACCESS_TOKEN> by your real access token!
+      const accessToken = "<YOUR_ACCESS_TOKEN>";
+      const map = new maplibregl.Map({
+        container: "map",
+        style: `https://api.jawg.io/styles/jawg-streets.json?access-token=${accessToken}`,
+        zoom: 5,
+        center: [3.47, 46.0],
+        hash: true,
+      }).addControl(new maplibregl.NavigationControl(), "top-right");
+      // This plugin is used for right to left languages
+      maplibregl.setRTLTextPlugin("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js");
+
+      map.on("load", () => {
+        const directions = new MapLibreGlDirections(map, {
+          api: "https://api.jawg.io/routing/route/v1",
+          profile: "car",
+          requestOptions: {
+            "access-token": accessToken,
+            alternatives: "true",
+            overview: "full",
+          },
+        });
+
+        // Enable interactivity (if needed)
+        directions.interactive = true;
+
+        // Paris [lng, lat]
+        const start = [2.3522, 48.8566];
+        // Marseille [lng, lat]
+        const end = [5.3698, 43.2965];
+
+        // Set the waypoints programmatically
+        directions.setWaypoints([start, end]);
+      });
+    </script>
+  </body>
+</html>