Click on the map for reverse geocoding with Leaflet

Estimated reading time: 1 minute

This example uses JawgPlaces.Leaflet to initialize a Jawg Places MapLibre Plugin on a webpage with a MapLibre or Mapbox map. It will allow you to perform Reverse Geocoding requests while cliking on the map.

You can see all reverse options here.

The value <YOUR_ACCESS_TOKEN> in the <script> tag must be replaced by your own access token from the Jawg Lab.

View on GitHub

<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/[email protected]/dist/leaflet.css" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>