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 reverse Geocode
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 reverse Geocode
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 To get started, either complete the Display a map tutorial or use this pen . 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.
Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.
In CodePen , update api Key
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 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 >
Update the map A navigation basemap layer is typically used in geocoding and routing applications. Update the basemap layer to use ArcGIS: Navigation
.
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 line 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
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);
Call the geocoding service 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 ) {
});
Call the reverse Geocode
operation and set your api Key
. Set the latlng
to the Lat Lng
of the location where the user clicks.
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)
});
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 ;
}
});
});
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
.
Add a Layer Group
to the map to contain reverse geocoding results. Call the clear Layers
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();
});
});
Create a Marker
at the result coordinates and add it to the layer Group
.
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);
});
});
Add a lng L a t String
variable that stores the rounded search result coordinates. Append the bind Popup
method to the marker
to display the coordinates and address of the result.
More info 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();
});
});
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: