> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baato.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Reverse search

> Turn map coordinates into an address in the browser.

This example shows you how to make use of a bundled Baato JavaScript Library to display a navigation route received from the [Baato Reverse Search API](/services/reverse).

<Frame caption="Clicking the map resolves an address">
  <img src="https://mintcdn.com/baato/3GUKEGLT42m2snov/images/html/reverse.png?fit=max&auto=format&n=3GUKEGLT42m2snov&q=85&s=3f2894eba0d27bc5f6aa2f4b4115f13a" alt="An address resolved from a clicked point on a Baato web map" width="3074" height="1596" data-path="images/html/reverse.png" />
</Frame>

<CodeGroup>
  ```html MapLibre GL JS theme={null}
  <!DOCTYPE html>
  <html lang="en">

  <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Baato - Reverse Search API</title>
      <script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>
      <link href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css" rel="stylesheet" />
      <style>
          body {
              margin: 0;
              padding: 0;
          }
      </style>
  </head>

  <body>
      <div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;">
          <div
              style="z-index: 10; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; right: 0px">
              © <a href="https://www.openstreetmap.org/copyright" rel="noopener noreferrer no follow"
                  target="_blank">OpenStreetMap contributors</a></div>
          <div
              style="z-index: 100; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; left: 0px">
              <a href="https://baato.io" rel="noopener noreferrer no follow" target="_blank"><img
                      src="https://sgp1.digitaloceanspaces.com/baatocdn/images/BaatoLogo.svg" alt="Baato"
                      width="80px"></img></a>
          </div>
      </div>
      </div>
      <div id="response"
          style="position: absolute; top: 10px; right: 10px; z-index: 1; width: 300px; border: 2px solid green; padding: 50px; margin: 10px; background: rgba(255, 255, 255, 0.75);">
          Click anywhere on the map.
      </div>
      <script src="https://www.unpkg.com/@klltech/baato-js-client@1.2.0/dist/bundle.js"></script>
      <script>
          var markers = [];
          var map = new maplibregl.Map({
              container: "map",
              style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN", // Baato stylesheet location
              center: [85.324, 27.7172], // starting position [lng, lat]
              zoom: 13, // starting zoom
          });

          map.on("click", (e) => {
              new Baato.Reverse()
                  .setBaseUrl(`https://api.baato.io/api`) // Baato base URL
                  .setKey("YOUR_BAATO_ACCESS_TOKEN") // Baato access token
                  .setCoordinates([e.lngLat.lat, e.lngLat.lng]) // [lng, lat] for reverse geocoding
                  .setRadius(0.05) // radius in Km (looks for nearest 50m, or else points to enarest neighbourhood)
                  .doRequest()
                  .then((res) => {
                      clearMarkers();

                      var marker = new maplibregl.Marker()
                          .setLngLat([res.data[0].centroid.lon, res.data[0].centroid.lat]) // adding marker for the response [lon, lat]
                          .addTo(map);
                      markers.push(marker);

                      function clearMarkers() {
                          markers.forEach((marker) => marker.remove());
                          markers = [];
                      }

                      document.getElementById("response").innerHTML = "<b>" + res.data[0].name + "</b>" + "<br/><br/>" + "<b>" + "Address: " + "</b>" + res.data[0].address;

                      // zoom map to the point where clicked
                      map.flyTo({
                          center: [res.data[0].centroid.lon, res.data[0].centroid.lat],
                          zoom: 14,
                          essential: true,

                      });
                  });
          });
      </script>
  </body>

  </html>
  ```

  ```html Mapbox GL JS theme={null}
  <!DOCTYPE html>
  <html lang="en">

  <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Baato - Reverse Search API</title>
      <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
      <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
      <style>
          body {
              margin: 0;
              padding: 0;
          }
      </style>
  </head>

  <body>
      <div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;">
          <div
              style="z-index: 10; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; right: 0px">
              © <a href="https://www.openstreetmap.org/copyright" rel="noopener noreferrer no follow"
                  target="_blank">OpenStreetMap contributors</a></div>
          <div
              style="z-index: 100; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; left: 0px">
              <a href="https://baato.io" rel="noopener noreferrer no follow" target="_blank"><img
                      src="https://sgp1.digitaloceanspaces.com/baatocdn/images/BaatoLogo.svg" alt="Baato"
                      width="80px"></img></a>
          </div>
      </div>
      </div>
      <div id="response"
          style="position: absolute; top: 10px; right: 10px; z-index: 1; width: 300px; border: 2px solid green; padding: 50px; margin: 10px; background: rgba(255, 255, 255, 0.75);">
          Click anywhere on the map.
      </div>
      <script src="https://www.unpkg.com/@klltech/baato-js-client@1.2.0/dist/bundle.js"></script>
      <script>
          var markers = [];
          var map = new mapboxgl.Map({
              container: "map",
              style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN", // Baato stylesheet location
              center: [85.324, 27.7172], // starting position [lng, lat]
              zoom: 13, // starting zoom
          });

          map.on("click", (e) => {
              new Baato.Reverse()
                  .setBaseUrl(`https://api.baato.io/api`) // Baato base URL
                  .setKey("YOUR_BAATO_ACCESS_TOKEN") // Baato access token
                  .setCoordinates([e.lngLat.lat, e.lngLat.lng]) // [lng, lat] for reverse geocoding
                  .setRadius(0.05) // radius in Km (looks for nearest 50m, or else points to enarest neighbourhood)
                  .doRequest()
                  .then((res) => {
                      clearMarkers();

                      var marker = new mapboxgl.Marker()
                          .setLngLat([res.data[0].centroid.lon, res.data[0].centroid.lat]) // adding marker for the response [lon, lat]
                          .addTo(map);
                      markers.push(marker);

                      function clearMarkers() {
                          markers.forEach((marker) => marker.remove());
                          markers = [];
                      }

                      document.getElementById("response").innerHTML = "<b>" + res.data[0].name + "</b>" + "<br/><br/>" + "<b>" + "Address: " + "</b>" + res.data[0].address;
                      // zoom map to the point where clicked
                      map.flyTo({
                          center: [res.data[0].centroid.lon, res.data[0].centroid.lat],
                          zoom: 14,
                          essential: true,

                      });
                  });
          });
      </script>
  </body>

  </html>
  ```
</CodeGroup>
