Click on the map for reverse geocoding with MapLibre

Estimated reading time: 1 minute

This example uses JawgPlaces.MapLibre 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/maplibre-gl.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>