Learn how to search for coffee shops, gas stations, restaurants and other nearby places with the geocoding service .
Place finding is the process of searching for a place name or POI to find its address and location . You can use the geocoding service to find places such as coffee shops, gas stations, or restaurants for any geographic location around the world. You can search for places by name or by using categories. You can search near a location or you can search globally.
In this tutorial, you use the Esri Leaflet Geocoder to access the Geocoding service and find places by place category.
You 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.
To get started, either complete the Display a map tutorial or use this pen . To 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 >
Import 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([ 37.7749 , -122.4194 ], 14 ); // San Francisco
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
// Create the select dropdown and add to the top-right of the map
L.Control.PlacesSelect = L.Control.extend({
onAdd : function ( map ) {
// Array of options
const optionsInfos = [[ "" , "Choose a category..." ],[ "Coffee shop" , "Coffee shop" ],[ "Gas station" , "Gas station" ],[ "Food" , "Food" ],[ "Hotel" , "Hotel" ],[ "Parks and Outdoors" , "Parks and Outdoors" ]];
// Create select
const select = L.DomUtil.create( "select" , "" );
select.setAttribute( "id" , "optionsSelect" );
select.setAttribute( "style" , "font-size: 16px;padding:4px 8px;" );
optionsInfos.forEach( ( optionsInfo ) => {
let option = L.DomUtil.create( "option" );
option.value = optionsInfo[ 0 ];
option.innerHTML = optionsInfo[ 1 ];
select.appendChild(option);
});
return select;
},
onRemove : function ( map ) {
// Nothing to do here
}
});
L.control.placesSelect = function ( opts ) {
return new L.Control.PlacesSelect(opts);
}
L.control.placesSelect({
position : 'topright'
}).addTo(map);
const layerGroup = L.layerGroup().addTo(map);
// When the selected where clause changes, do the geocode
const select = document .getElementById( 'optionsSelect' );
select.addEventListener( 'change' , () => {
if (select.value !== '' ) {
const geocoder = L.esri.Geocoding.geocodeService({
apikey : apiKey
});
geocoder.geocode()
.category(select.value)
.nearby(map.getCenter(), 10 )
.run( function ( error, response ) {
if (error) {
return ;
}
layerGroup.clearLayers();
response.results.forEach( ( searchResult ) => {
L.marker(searchResult.latlng)
.addTo(layerGroup)
.bindPopup( `<b> ${searchResult.properties.PlaceName} </b></br> ${searchResult.properties.Place_addr} ` );
});
});
}
});
</ script >
</ body >
</ html >
Show more lines
Add the following code to search places near a location that are filtered by different categories:
Change the basemap layer to Navigation and set the location to San Francisco. Add a list of categories to choose from. Add a handler to listen for category changes. Call the geocoding service to find places for the selected category. Display the places on the map. 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. 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. 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([ 37.7749 , -122.4194 ], 14 ); // San Francisco
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
// Create the select dropdown and add to the top-right of the map
L.Control.PlacesSelect = L.Control.extend({
onAdd : function ( map ) {
// Array of options
const optionsInfos = [[ "" , "Choose a category..." ],[ "Coffee shop" , "Coffee shop" ],[ "Gas station" , "Gas station" ],[ "Food" , "Food" ],[ "Hotel" , "Hotel" ],[ "Parks and Outdoors" , "Parks and Outdoors" ]];
// Create select
const select = L.DomUtil.create( "select" , "" );
select.setAttribute( "id" , "optionsSelect" );
select.setAttribute( "style" , "font-size: 16px;padding:4px 8px;" );
optionsInfos.forEach( ( optionsInfo ) => {
let option = L.DomUtil.create( "option" );
option.value = optionsInfo[ 0 ];
option.innerHTML = optionsInfo[ 1 ];
select.appendChild(option);
});
return select;
},
onRemove : function ( map ) {
// Nothing to do here
}
});
L.control.placesSelect = function ( opts ) {
return new L.Control.PlacesSelect(opts);
}
L.control.placesSelect({
position : 'topright'
}).addTo(map);
const layerGroup = L.layerGroup().addTo(map);
// When the selected where clause changes, do the geocode
const select = document .getElementById( 'optionsSelect' );
select.addEventListener( 'change' , () => {
if (select.value !== '' ) {
const geocoder = L.esri.Geocoding.geocodeService({
apikey : apiKey
});
geocoder.geocode()
.category(select.value)
.nearby(map.getCenter(), 10 )
.run( function ( error, response ) {
if (error) {
return ;
}
layerGroup.clearLayers();
response.results.forEach( ( searchResult ) => {
L.marker(searchResult.latlng)
.addTo(layerGroup)
.bindPopup( `<b> ${searchResult.properties.PlaceName} </b></br> ${searchResult.properties.Place_addr} ` );
});
});
}
});
</ script >
</ body >
</ html >
Show more lines
In CodePen , run your code to display the map.
When you choose a place category, you should see the places returned with pins on the map. Click each pin to view a pop-up with the place information.
Learn how to use additional ArcGIS location services in these tutorials:
