Learn how to find an address near a location with the geocoding service.
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 reverse
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
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 .
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
to use your key.Key Use dark colors for code blocks 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.
Use dark colors for code blocks <!-- 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.3/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.Use dark colors for code blocks 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.Use dark colors for code blocks L.esri.Vector.vectorBasemapLayer(basemapEnum, { apiKey: apiKey }).addTo(map); map.on("click", function (e) { });
-
Call the
reverse
operation and set yourGeocode api
. Set theKey latlng
to theLat
of the location where the user clicks.Lng reverse
queries the geocoding service by default, but can also query other geocoding services.Geocode Use dark colors for code blocks 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.Use dark colors for code blocks 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
to the map to contain reverse geocoding results. Call theGroup clear
method to remove previous results.Layers Use dark colors for code blocks 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 thelayer
.Group Use dark colors for code blocks 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
variable that stores the rounded search result coordinates. Append theL a t String bind
method to thePopup 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.
Use dark colors for code blocks 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: