feat: add reverse example for maplibre + leaflet

Joxit · Joxit · commit 75eade36b47a · 2025-01-03T17:16:52.000+01:00
diff --git a/examples/leaflet/leaflet+reverse.html b/examples/leaflet/leaflet+reverse.html
@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css" />
+    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
+  </head>
+  <body>
+    <div id="my-map" style="height: 100%; min-height: 500px"></div>
+    <script>
+      const map = new L.Map('my-map').setView([0, 0], 2);
+      L.tileLayer(`https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}.png?access-token=<YOUR_ACCESS_TOKEN>`, {
+        attribution:
+          '<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank" class="jawg-attrib">&copy; <b>Jawg</b>Maps</a> | <a href="https://www.openstreetmap.org/copyright" title="OpenStreetMap is open data licensed under ODbL" target="_blank" class="osm-attrib">&copy; OSM contributors</a>',
+        maxZoom: 22,
+      }).addTo(map);
+      const jawgPlaces = new JawgPlaces.Leaflet({
+        searchOnTyping: true,
+        reverse: true,
+        layers: 'coarse',
+        L,
+      });
+      map.addControl(jawgPlaces);
+      map.on('click', ({ latlng }) => {
+        jawgPlaces.setValue(`${latlng.lat.toFixed(5)} ${latlng.lng.toFixed(5)}`);
+        jawgPlaces.submit();
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/maplibre/maplibre+reverse.html b/examples/maplibre/maplibre+reverse.html
@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.7.1/dist/maplibre-gl.min.css" />
+    <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4.7.1/dist/maplibre-gl.min.js"></script>
+  </head>
+  <body>
+    <div id="my-map" style="height: 100%; min-height: 500px"></div>
+    <script>
+      const map = new maplibregl.Map({
+        container: 'my-map',
+        style: `https://api.jawg.io/styles/jawg-sunny.json?access-token=<YOUR_ACCESS_TOKEN>`,
+        center: [0, 0],
+        zoom: 1,
+      });
+      const jawgPlaces = new JawgPlaces.MapLibre({
+        searchOnTyping: true,
+        reverse: true,
+        layers: 'coarse',
+      });
+      map.addControl(new maplibregl.NavigationControl());
+      map.addControl(jawgPlaces);
+      map.on('click', ({ lngLat }) => {
+        jawgPlaces.setValue(`${lngLat.lat.toFixed(5)} ${lngLat.lng.toFixed(5)}`);
+        jawgPlaces.submit();
+      });
+    </script>
+  </body>
+</html>
