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.
PrerequisitesYou 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 penTo get started, either complete the Display a map tutorial or use this pen . Set the API keyTo 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 geocoderImport the Esri Leaflet Geocoder module from the CDN.
Show more lines
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 >
Show more lines
Add code to reverse geocodeAdd 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.
<!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
Run the appIn 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: