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.
Prerequisites You need an ArcGIS 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 apiKey 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
<!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.8.0/dist/leaflet.css" crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@3.1.3/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 geocoder Import the Esri Leaflet Geocoder module from the CDN.
Use dark colors for code blocks
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!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.8.0/dist/leaflet.css" crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@3.1.3/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 !== "" ) {
L.esri.Geocoding
.geocode({
apikey : apiKey
})
.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 code to find places 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. Use dark colors for code blocks
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. 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!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.8.0/dist/leaflet.css" crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@3.1.3/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 !== "" ) {
L.esri.Geocoding
.geocode({
apikey : apiKey
})
.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
Run the app 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.
What's next? Learn how to use additional ArcGIS location services in these tutorials:
