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.

Esri Leaflet provides a geocoder to access the geocoding service. In this tutorial, you use the reverseGeocode operation to reverse geocode and find the closest address to your clicked location on the map.

Prerequisites

You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key.

Steps

Create a new pen

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

Set the API key

To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.

  1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

  2. In CodePen, update apiKey to use your key.

    Use dark colors for code blocks
                                                              
    Change line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
          const map = L.map("map", {
            minZoom: 2
          })
    
          map.setView([34.02, -118.805], 13);
    
          const apiKey = "YOUR_API_KEY";
    
          const basemapEnum = "ArcGIS:Streets";
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            apiKey: apiKey
          }).addTo(map);
    

Reference the geocoder

  1. Reference the Esri Leaflet Geocoder plugin.

    Expand
    Use dark colors for code blocks
                                                                                        
    Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
        <!-- Load Leaflet from CDN -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
        <!-- Load Esri Leaflet from CDN -->
        <script src="https://unpkg.com/esri-leaflet@3.0.10/dist/esri-leaflet.js"></script>
        <script src="https://unpkg.com/esri-leaflet-vector@4.0.2/dist/esri-leaflet-vector.js"></script>
    
        <!-- Load Esri Leaflet Geocoder from CDN -->
        <script src="https://unpkg.com/esri-leaflet-geocoder@3.1.4/dist/esri-leaflet-geocoder.js"></script>
    
    Expand

Update the map

A navigation basemap layer is typically used in geocoding and routing applications. Update the basemap layer to use ArcGIS:Navigation.

  1. Update the basemap style and change the map view to center on location [2.3522,48.8566], Paris.

    Expand
    Use dark colors for code blocks
                                                                                        
    Change lineChange line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
          const apiKey = "YOUR_API_KEY";
    
          const basemapEnum = "ArcGIS:Navigation";
    
          const map = L.map("map", {
            minZoom: 2
          })
    
          map.setView([48.8566, 2.3522], 13); // Paris
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            apiKey: apiKey
          }).addTo(map);
    
    Expand

Call the geocoding service

  1. Create a click handler that will call the geocoding service when a user clicks on the map.

    Expand
    Use dark colors for code blocks
                                                                                        
    Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            apiKey: apiKey
          }).addTo(map);
    
          map.on("click", function (e) {
    
          });
    
    Expand
  2. Call the reverseGeocode operation and set your apiKey. Set the latlng to the LatLng of the location where the user clicks.

    reverseGeocode queries the geocoding service by default, but can also query other geocoding services.

    Expand
    Use dark colors for code blocks
                                                                                        
    Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
          map.on("click", function (e) {
    
            L.esri.Geocoding
              .reverseGeocode({
                apikey: apiKey
              })
              .latlng(e.latlng)
    
          });
    
    Expand
  3. Execute the request using run and handle any errors within the callback function.

    Expand
    Use dark colors for code blocks
                                                                                        
    Add line.Add line.Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
          map.on("click", function (e) {
    
            L.esri.Geocoding
              .reverseGeocode({
                apikey: apiKey
              })
              .latlng(e.latlng)
    
              .run(function (error, result) {
                if (error) {
                  return;
                }
    
              });
    
          });
    
    Expand

Display the result

The response from the operation contains the location of an address or place. Use the results to display them in a Popup.

  1. Add a LayerGroup to the map to contain reverse geocoding results. Call the clearLayers method to remove previous results.

    Expand
    Use dark colors for code blocks
                                                                                        
    Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
          const layerGroup = L.layerGroup().addTo(map);
    
          map.on("click", function (e) {
    
            L.esri.Geocoding
              .reverseGeocode({
                apikey: apiKey
              })
              .latlng(e.latlng)
    
              .run(function (error, result) {
                if (error) {
                  return;
                }
    
                layerGroup.clearLayers();
    
              });
    
          });
    
    Expand
  2. Create a Marker at the result coordinates and add it to the layerGroup.

    Expand
    Use dark colors for code blocks
                                                                                        
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
          const layerGroup = L.layerGroup().addTo(map);
    
          map.on("click", function (e) {
    
            L.esri.Geocoding
              .reverseGeocode({
                apikey: apiKey
              })
              .latlng(e.latlng)
    
              .run(function (error, result) {
                if (error) {
                  return;
                }
    
                layerGroup.clearLayers();
    
                marker = L.marker(result.latlng).addTo(layerGroup);
    
              });
    
          });
    
    Expand
  3. Add a lngLatString variable that stores the rounded search result coordinates. Append the bindPopup method to the marker to display the coordinates and address of the result.

    To learn more about using pop-ups with Esri Leaflet, go to the Display a pop-up tutorial.

    Expand
    Use dark colors for code blocks
                                                                                        
    Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
          const layerGroup = L.layerGroup().addTo(map);
    
          map.on("click", function (e) {
    
            L.esri.Geocoding
              .reverseGeocode({
                apikey: apiKey
              })
              .latlng(e.latlng)
    
              .run(function (error, result) {
                if (error) {
                  return;
                }
    
                layerGroup.clearLayers();
    
                marker = L.marker(result.latlng).addTo(layerGroup);
    
                const lngLatString = `${Math.round(result.latlng.lng * 100000) / 100000}, ${Math.round(result.latlng.lat * 100000) / 100000}`;
    
                marker.bindPopup(`<b>${lngLatString}</b><p>${result.address.Match_addr}</p>`);
                marker.openPopup();
    
              });
    
          });
    
    Expand

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:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.