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 reverseGeocodeEsri 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.
You need an ArcGIS account to access the developer dashboard and create an API key .
To get started, either complete the Display a map tutorial or use this pen . To access location services , you need an API key or OAuth 2.0 access token .
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 apiKey to use your key.
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
<!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 >
Import the Esri Leaflet Geocoder module from the CDN.
Show more lines
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
85
<!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 >
Show more lines
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. Show more lines
Change line Change 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. 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
85
<!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 >
Show more lines
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.
Learn how to use additional ArcGIS location services in these tutorials:
