Reverse geocode

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

A mapping application that performs reverse geocoding to match coordinates to addresses

Reverse geocode coordinates to addresses 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 Location Platform or ArcGIS Online account.

Steps

Create a new pen

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

Get an access token

You need an access token with the correct privileges to access the resources used in this tutorial.

  1. Go to the Create an API key tutorial and create an API key with the following privilege(s):

    • Privileges
      • Location services > Basemaps
      • Location services > Geocoding
  2. Copy the API key access token to your clipboard when prompted.

  3. In CodePen, update the accessToken variable to use your access token.

    Use dark colors for code blocks
    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 accessToken = "YOUR_ACCESS_TOKEN";
    
          const basemapEnum = "arcgis/streets";
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            token: accessToken
          }).addTo(map);
    

To learn about the other types of authentication available, go to Types of authentication.

Reference the geocoder

  1. Reference the Esri Leaflet Geocoder plugin.

    Expand
    Use dark colors for code blocks
    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.12/dist/esri-leaflet.js"></script>
        <script src="https://unpkg.com/esri-leaflet-vector@4.2.5/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
    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 accessToken = "YOUR_ACCESS_TOKEN";
    
          const basemapEnum = "arcgis/navigation";
    
          const map = L.map("map", {
            minZoom: 2
          })
    
          map.setView([48.8566, 2.3522], 13); // Paris
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            token: accessToken
          }).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
    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, {
            token: accessToken
          }).addTo(map);
    
          map.on("click", function (e) {
    
          });
    
    Expand
  2. Call the reverseGeocode operation and set your accessToken. Set the latlng to the LatLng of the location where the user clicks.

    Expand
    Use dark colors for code blocks
    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: accessToken
              })
              .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
    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: accessToken
              })
              .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
    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: accessToken
              })
              .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
    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: accessToken
              })
              .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.

    Expand
    Use dark colors for code blocks
    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: accessToken
              })
              .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.