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.
Esri Leaflet provides a built in geocoder to access the geocoding service. In this tutorial, you use the geocode
operation to find places by place category.
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 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 api Key
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
55
56
57
58
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.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
<!-- 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.10/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@4.0.2/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 [151.2093, -33.8688]
, Sydney.
Expand
Use dark colors for code blocks
Change line 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
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
127
128
129
130
131
132
133
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Navigation" ;
const map = L.map( "map" , {
minZoom : 2
})
map.setView([ 37.7749 , - 122.4194 ], 14 ); // San Francisco
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
Create a place category selector You filter place search results by providing a location and category. Places can be filtered by categories such as coffee shops , gas stations , and hotels . Create a selector to provide a list of several categories from which to choose.
Extend the Control
class to create a Places Select
dropdown. Add HTML and CSS to customize its appearance.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
L.Control.PlacesSelect = L.Control.extend({
onAdd : function ( map ) {
const select = L.DomUtil.create( "select" , "" );
select.setAttribute( "id" , "optionsSelect" );
select.setAttribute( "style" , "font-size: 16px;padding:4px 8px;" );
return select;
},
onRemove : function ( map ) {
// Nothing to do here
}
});
Create a list of place Categories
that be can used to make a selection.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
L.Control.PlacesSelect = L.Control.extend({
onAdd : function ( map ) {
const placeCategories = [
[ "" , "Choose a category..." ],
[ "Coffee shop" , "Coffee shop" ],
[ "Gas station" , "Gas station" ],
[ "Food" , "Food" ],
[ "Hotel" , "Hotel" ],
[ "Parks and Outdoors" , "Parks and Outdoors" ]
];
const select = L.DomUtil.create( "select" , "" );
select.setAttribute( "id" , "optionsSelect" );
select.setAttribute( "style" , "font-size: 16px;padding:4px 8px;" );
return select;
},
onRemove : function ( map ) {
// Nothing to do here
}
});
Add each place category as an option
in the select
element.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
L.Control.PlacesSelect = L.Control.extend({
onAdd : function ( map ) {
const placeCategories = [
[ "" , "Choose a category..." ],
[ "Coffee shop" , "Coffee shop" ],
[ "Gas station" , "Gas station" ],
[ "Food" , "Food" ],
[ "Hotel" , "Hotel" ],
[ "Parks and Outdoors" , "Parks and Outdoors" ]
];
const select = L.DomUtil.create( "select" , "" );
select.setAttribute( "id" , "optionsSelect" );
select.setAttribute( "style" , "font-size: 16px;padding:4px 8px;" );
placeCategories.forEach( ( category ) => {
let option = L.DomUtil.create( "option" );
option.value = category[ 0 ];
option.innerHTML = category[ 1 ];
select.appendChild(option);
});
return select;
},
onRemove : function ( map ) {
// Nothing to do here
}
});
Add the category selector to the topright
corner of the map.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
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);
Run your app and interact with the category selector, choosing between different options.
Search for place addresses To find place addresses, you use the geocode
operation. Performing a local search based on a category requires a location from which to search and a category name. The operation calls the geocoding service and returns place candidates with a name, address and location information.
Create a function called show Places
that takes a category selection as a parameter.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
L.control.placesSelect({
position : "topright"
}).addTo(map);
function showPlaces ( category ) {
}
Call the geocode
operation and set your api Key
. Pass the category, and set the search location to the center of the map.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
function showPlaces ( category ) {
L.esri.Geocoding
.geocode({
apikey : apiKey
})
.category(category)
.nearby(map.getCenter(), 10 )
}
Execute the request using run
and handle any errors within the callback function.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
function showPlaces ( category ) {
L.esri.Geocoding
.geocode({
apikey : apiKey
})
.category(category)
.nearby(map.getCenter(), 10 )
.run( function ( error, response ) {
if (error) {
return ;
}
});
}
Add a change event handler Use an event handler to call the show Places
function when the category is changed.
Add a change
event handler to the select
element. Inside, call the show Places
function with the selected category as its parameter.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
L.control.placesSelect({
position : "topright"
}).addTo(map);
function showPlaces ( category ) {
L.esri.Geocoding
.geocode({
apikey : apiKey
})
.category(category)
.nearby(map.getCenter(), 10 )
}
const select = document .getElementById( "optionsSelect" );
select.addEventListener( "change" , () => {
if (select.value !== "" ) {
showPlaces(select.value);
}
});
Display results You can display the results
of the search with a Marker
and Popup
.
Add a Layer Group
to the map to contain the results.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
L.control.placesSelect({
position : "topright"
}).addTo(map);
const layerGroup = L.layerGroup().addTo(map);
function showPlaces ( category ) {
L.esri.Geocoding
.geocode({
apikey : apiKey
})
.category(category)
.nearby(map.getCenter(), 10 )
.run( function ( error, response ) {
if (error) {
return ;
}
});
}
In the show Places
function, call the clear Layers
method to remove the previous results from the layer Group
.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
L.control.placesSelect({
position : "topright"
}).addTo(map);
const layerGroup = L.layerGroup().addTo(map);
function showPlaces ( category ) {
L.esri.Geocoding
.geocode({
apikey : apiKey
})
.category(category)
.nearby(map.getCenter(), 10 )
.run( function ( error, response ) {
if (error) {
return ;
}
layerGroup.clearLayers();
});
}
Iterate through each search result to create a Marker
and add the markers to the layer Group
. Call the bind Popup
method to display the place names and addresses in a popup.
Expand
Use dark colors for code blocks
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
127
128
129
130
131
132
133
function showPlaces ( category ) {
L.esri.Geocoding
.geocode({
apikey : apiKey
})
.category(category)
.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} ` );
});
});
}
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: