Reverse geocode

Learn how to find an address near a location with the geocoding service.

Reverse geocoding is the process of converting a location to an address or place. To reverse geocode, you use the Geocoding service and the reverseGeocode operation. This operation requires an initial location and returns an address with attributes such as place name and location. To simplify accessing the Geocoding service, you use the Esri Leaflet Geocoder.

In this tutorial, you use the Esri Leaflet Geocoder to reverse geocode and find the closest address to your clicked location on the map.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a new pen

To get started, either complete the Display a map tutorial or .

Set the API key

To access ArcGIS location services, you need an API key.

Go to your dashboard to get an API key.

In CodePen, update apiKey to use your key.

Change line
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Esri Leaflet</title>

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map {
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
  </style>

</head>

<body>
  <div id="map"></div>

  <script>

    const apiKey = "YOUR-API-KEY";
    const basemapEnum = "ArcGIS:Streets";

    const map = L.map('map', {
      minZoom: 2
    }).setView([34.02,-118.805], 13);

    L.esri.Vector.vectorBasemapLayer(basemapEnum, {
      apiKey: apiKey
    }).addTo(map);

  </script>

</body>

</html>

Reference the geocoder

Import the Esri Leaflet Geocoder module from the CDN.

Add line.Add line.
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Esri Leaflet</title>

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>


  <!-- Load Esri Leaflet Geocoder from CDN -->
  <script src="https://unpkg.com/esri-leaflet-geocoder@3.0.0/dist/esri-leaflet-geocoder.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map {
      position: absolute;
      top:0;
      bottom:0;
      right:0;
      left:0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #323232;
    }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

    const apiKey = "YOUR-API-KEY";

    const basemapEnum = "ArcGIS:Navigation";

    const map = L.map("map", {
      minZoom: 2

    }).setView([48.8566,2.3522], 13);  // Paris

    L.esri.Vector.vectorBasemapLayer(basemapEnum, {
      apiKey: apiKey
    }).addTo(map);


    const geocoder = L.esri.Geocoding.geocodeService({
      apikey: apiKey
    });

    const layerGroup = L.layerGroup().addTo(map);

    map.on("click", function (e) {
      geocoder.reverse().latlng(e.latlng).run(function (error, result) {
        if (error) {
          return;
        }

        const lngLatString = `${Math.round(result.latlng.lng * 100000)/100000}, ${Math.round(result.latlng.lat * 100000)/100000}`;

        layerGroup.clearLayers();
        marker = L.marker(result.latlng)
          .addTo(layerGroup)
          .bindPopup(`<b>${lngLatString}</b><p>${result.address.Match_addr}</p>`)
          .openPopup();
      });
    });

  </script>

</body>

</html>

Add code to reverse geocode

Add the following code to add the reverse geocoding functionality:

Change the basemap layer to Navigation and set the location to Paris.
Create the geocoder.
Create layer group for the marker.
Create a click handler to use the point and call the reverse method.
Add the marker and show a pop-up with the location and address information.

Change lineChange lineAdd line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Esri Leaflet</title>

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>


  <!-- Load Esri Leaflet Geocoder from CDN -->
  <script src="https://unpkg.com/esri-leaflet-geocoder@3.0.0/dist/esri-leaflet-geocoder.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map {
      position: absolute;
      top:0;
      bottom:0;
      right:0;
      left:0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #323232;
    }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

    const apiKey = "YOUR-API-KEY";

    const basemapEnum = "ArcGIS:Navigation";

    const map = L.map("map", {
      minZoom: 2

    }).setView([48.8566,2.3522], 13);  // Paris

    L.esri.Vector.vectorBasemapLayer(basemapEnum, {
      apiKey: apiKey
    }).addTo(map);


    const geocoder = L.esri.Geocoding.geocodeService({
      apikey: apiKey
    });

    const layerGroup = L.layerGroup().addTo(map);

    map.on("click", function (e) {
      geocoder.reverse().latlng(e.latlng).run(function (error, result) {
        if (error) {
          return;
        }

        const lngLatString = `${Math.round(result.latlng.lng * 100000)/100000}, ${Math.round(result.latlng.lat * 100000)/100000}`;

        layerGroup.clearLayers();
        marker = L.marker(result.latlng)
          .addTo(layerGroup)
          .bindPopup(`<b>${lngLatString}</b><p>${result.address.Match_addr}</p>`)
          .openPopup();
      });
    });

  </script>

</body>

</html>

Run the app

In CodePen, run your code to display the map.

Click on the map to reverse geocode the clicked point and display a pop-up with the closest address and coordinates.

What's next?

Learn how to use additional ArcGIS location services in these tutorials:

Find places

Search for coffee shops, gas stations, restaurants and other nearby places with the Geocoding service.

Find service areas

Calculate the area that can be reached in a given driving time from a location.

Find a route and directions

Find a route and directions with the route service.

PreviousSearch for an address NextFind places

Solution

Estimated time

20 minutes

DocumentationEsri Leaflet Guide

Reverse geocode

Solution

Estimated time

Was this page helpful?

Solution

Estimated time

Was this page helpful?

Was this page helpful?