Learn how to search for businesses, POIs, and geographic locations 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 a locatorGeocoding service and find places by place category. Pop-ups are used to display the place name and address.
Prerequisites 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.
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 ArcGIS services , you need an API key .
Go to your dashboard to get an API key .
In CodePen , set the api to your key, so it can be used to access basemap layer and location services.
Use dark colors for code blocks
Change line
1
2
3
4
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic" // Basemap layer service
});
Add modules In the require statement, add the locatorGraphic
More info The ArcGIS API for JavaScript uses AMD modules . The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.
Expand
Use dark colors for code blocks
Add line. Add 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
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/rest/locator" ,
"esri/Graphic"
], function ( esriConfig, Map , MapView, locator, Graphic ) {
Update the map A streets basemap layer is typically used in geocoding applications. Update the basemaparcgis-navigation basemap layer and change the position of the map to center on Tromso.
Update the basemaparcgis-topographic to arcgis-navigation.
Expand
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
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
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-navigation"
});
Update the center[18.9553, 69.6492].
Expand
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
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
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [ 18.9553 , 69.6492 ], //Longitude, latitude
zoom : 13
});
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 shop , gas station , and hotels . Use an HTML select element to provide a list of several categories from which to choose.
Create an array of places for the categories that will be used to make a selection.
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
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [ 18.9553 , 69.6492 ], //Longitude, latitude
zoom : 13
});
const places = [ "Choose a place type..." , "Parks and Outdoors" , "Coffee shop" , "Gas station" , "Food" , "Hotel" ];
Create a parent select element for the search categories and assign some styles .
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
const places = [ "Choose a place type..." , "Parks and Outdoors" , "Coffee shop" , "Gas station" , "Food" , "Hotel" ];
const select = document .createElement( "select" , "" );
select.setAttribute( "class" , "esri-widget esri-select" );
select.setAttribute( "style" , "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em" );
Create an option element for each category and add it to 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
const select = document .createElement( "select" , "" );
select.setAttribute( "class" , "esri-widget esri-select" );
select.setAttribute( "style" , "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em" );
places.forEach( function ( p ) {
const option = document .createElement( "option" );
option.value = p;
option.innerHTML = p;
select.appendChild(option);
});
Add the select element to the top-right corner of the view .
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
places.forEach( function ( p ) {
const option = document .createElement( "option" );
option.value = p;
option.innerHTML = p;
select.appendChild(option);
});
view.ui.add(select, "top-right" );
Define the service url You can use a locatorGeocoding service .
Define a variable, locator, to the URL for the Geocoding service .
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
view.ui.add(select, "top-right" );
const locatorUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer" ;
Search for places To find places , you use the locatoraddresslocation from which to search and a category name. The function sends a request to the Geocoding service and the service returns place candidates with a name, address and location information. Use the function to perform a search and add the results to the map as graphics .
Create a find function and call addresslocationcategoriesout
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.
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
const locatorUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer" ;
// Find places and add them to the map
function findPlaces ( category, pt ) {
locator.addressToLocations(locatorUrl, {
location : pt,
categories : [category],
maxLocations : 25 ,
outFields : [ "Place_addr" , "PlaceName" ]
})
}
Clear the view of existing pop-ups and graphics .
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
// Find places and add them to the map
function findPlaces ( category, pt ) {
locator.addressToLocations(locatorUrl, {
location : pt,
categories : [category],
maxLocations : 25 ,
outFields : [ "Place_addr" , "PlaceName" ]
})
.then( function ( results ) {
view.popup.close();
view.graphics.removeAll();
});
}
Create a Graphicattributesgeometrysymbolpopupview.
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. 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
.then( function ( results ) {
view.popup.close();
view.graphics.removeAll();
results.forEach( function ( result ) {
view.graphics.add(
new Graphic({
attributes : result.attributes, // Data attributes returned
geometry : result.location, // Point returned
symbol : {
type : "simple-marker" ,
color : "#000000" ,
size : "12px" ,
outline : {
color : "#ffffff" ,
width : "2px"
}
},
popupTemplate : {
title : "{PlaceName}" , // Data attribute names
content : "{Place_addr}"
}
}));
});
});
Call the find function when the view loads and each time the view changes and becomes stationary.
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
popupTemplate : {
title : "{PlaceName}" , // Data attribute names
content : "{Place_addr}"
}
}));
});
});
}
// Search for places in center of map
view.watch( "stationary" , function ( val ) {
if (val) {
findPlaces(select.value, view.center);
}
});
Places for parks should be displayed on the map. By dragging the map, you will see new places populate the view .
Add a handler to select a category Use an event handler to call the find function when the category is changed.
Add an event listener to listen for category changes.
Expand
Use dark colors for code blocks
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
// Search for places in center of map
view.watch( "stationary" , function ( val ) {
if (val) {
findPlaces(select.value, view.center);
}
});
// Listen for category changes and find places
select.addEventListener( 'change' , function ( event ) {
findPlaces(event.target.value, view.center);
});
Run the app In CodePen , run your code to display the map.
When you select a category, you should see places displayed in the center of the map for the category you selected. The search occurs when the map loads and when the map view position changes by zooming or panning. You can also click on the graphics to display pop-ups with the name and address information for each place.
What's next? Learn how to use additional API features and
ArcGIS services in these tutorials: