Learn how to perform a text-based search to find places within a bounding box.
A bounding box search finds places within an extent using the places service . An extent typically represents the visible area of a map.
To perform a bounding box search, you use the places package from ArcGIS REST JS. With the results of the search, you can make another request to the service and return place attributes such as street address and telephone number.
In this tutorial, you use ArcGIS REST JS to perform a bounding box search based on the visible extent on the map and return details about each place. It includes starter code that uses Calcite components to create a basic search interface.
Prerequisites Steps Get the starter code To get started, use this CodePen . It contains the Calcite Components necessary to create this application, as well as a blank Leaflet map. 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.
Use dark colors for code blocks
Change line
1
2
3
4
5
6
7
8
9
10
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Streets" ;
const map = new maplibregl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 12 , // starting zoom
center : [- 118.805 , 34.027 ] // starting location [longitude, latitude]
});
Reference ArcGIS REST JS Reference the routing and request packages from ArcGIS REST JS.
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!-- Load MapLibre from CDN -->
< script src = https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js > </ script >
< link href = https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css rel = "stylesheet" />
<!-- Calcite components -->
< script type = "module" src = "https://js.arcgis.com/calcite-components/1.0.5/calcite.esm.js" > </ script >
< link rel = "stylesheet" type = "text/css" href = "https://js.arcgis.com/calcite-components/1.0.5/calcite.css" />
<!-- ArcGIS REST JS: request and places -->
< script src = "https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js" > </ script >
< script src = "https://unpkg.com/@esri/arcgis-rest-places@1.0.0/dist/bundled/places.umd.js" > </ script >
Create a REST JS Api
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Community" ;
const map = new maplibregl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 13 , // starting zoom
center : [- 122.32116 , 47.62737 ] // starting location [longitude, latitude]
});
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
Add event listeners The starter code provided for this tutorial includes a basic user interface with a text input and category buttons. Add event listeners to this interface to make requests to the places service on when they are clicked.
Create a show function to make requests to the places service.
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
<!-- Load MapLibre from CDN -->
< script src = https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js > </ script >
< link href = https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css rel = "stylesheet" />
<!-- Calcite components -->
< script type = "module" src = "https://js.arcgis.com/calcite-components/1.0.5/calcite.esm.js" > </ script >
< link rel = "stylesheet" type = "text/css" href = "https://js.arcgis.com/calcite-components/1.0.5/calcite.css" />
<!-- ArcGIS REST JS: request and places -->
< script src = "https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js" > </ script >
< script src = "https://unpkg.com/@esri/arcgis-rest-places@1.0.0/dist/bundled/places.umd.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 ;
z-index : 1 ;
}
#place-control {
position :absolute;
top : 15px ;
left : 15px ;
display :flex;
flex-direction : row;
z-index : 2 ;
}
.search {
margin-right : 15px ;
}
#search-input {
width : 270px ;
}
.category-button {
margin :auto 5px ;
}
</ style >
</ head >
< body >
< div id = "place-control" >
< div class = "search" >
< calcite-input type = "text" id = "search-input" placeholder = "Type in a place name or category" >
< calcite-button kind = "inverse" icon-start = "search" id = "search-button" type = "submit" slot = "action" > </ calcite-button >
</ calcite-input >
</ div >
</ div >
< div id = "map" > </ div >
< script >
const control = document .getElementById( "place-control" );
const input = document .getElementById( "search-input" )
const placeKeywords = [ "Restaurants" , "Hotels" , "Museums" , "ATMs" , "Breweries" ];
document .getElementById( "search-button" ).addEventListener( "click" , e => {
showPlaces(input.value)
})
placeKeywords.forEach( category => {
const categoryButton = document .createElement( "calcite-button" );
categoryButton.setAttribute( "class" , "category-button" );
categoryButton.setAttribute( "round" , true );
categoryButton.setAttribute( "scale" , "s" );
categoryButton.setAttribute( "kind" , "inverse" )
categoryButton.innerHTML = category;
categoryButton.id = category;
control.appendChild(categoryButton);
categoryButton.addEventListener( "click" , e => {
input.value = category;
showPlaces(category)
})
})
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Community" ;
const map = new maplibregl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 13 , // starting zoom
center : [- 122.32116 , 47.62737 ] // starting location [longitude, latitude]
});
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
const currentPlaces = [];
function showPlaces ( text ) {
};
function getDetails ( popup,id ) {
arcgisRest.getPlaceDetails(({
placeId : id,
authentication,
requestedFields : [ "name" , "address:streetAddress" , "contactInfo:telephone" ]
}))
.then( ( result )=> {
console .log(result)
let popupContents = `<b> ${result.placeDetails.name} </b><br>` ;
if (result.placeDetails.address.streetAddress) popupContents += ` ${result.placeDetails.address.streetAddress} <br>` ;
if (result.placeDetails.contactInfo.telephone) popupContents += ` ${result.placeDetails.contactInfo.telephone} ` ;
popup.setHTML(popupContents);
});
};
document .getElementById(placeKeywords[ 0 ]).dispatchEvent( new Event( 'click' ));
</ script >
</ body >
</ html >
Add an event listener to the search button that calls show on click.
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
const control = document .getElementById( "place-control" );
const input = document .getElementById( "search-input" )
const placeKeywords = [ "Restaurants" , "Hotels" , "Museums" , "ATMs" , "Breweries" ];
document .getElementById( "search-button" ).addEventListener( "click" , e => {
showPlaces(input.value)
})
placeKeywords.forEach( category => {
const categoryButton = document .createElement( "calcite-button" );
categoryButton.setAttribute( "class" , "category-button" );
categoryButton.setAttribute( "round" , true );
categoryButton.setAttribute( "scale" , "s" );
categoryButton.setAttribute( "kind" , "inverse" )
categoryButton.innerHTML = category;
categoryButton.id = category;
control.appendChild(categoryButton);
})
Add an event listener to each category button that calls show on click.
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
placeKeywords.forEach( category => {
const categoryButton = document .createElement( "calcite-button" );
categoryButton.setAttribute( "class" , "category-button" );
categoryButton.setAttribute( "round" , true );
categoryButton.setAttribute( "scale" , "s" );
categoryButton.setAttribute( "kind" , "inverse" )
categoryButton.innerHTML = category;
categoryButton.id = category;
control.appendChild(categoryButton);
categoryButton.addEventListener( "click" , e => {
input.value = category;
showPlaces(category)
})
})
Find places in the map bounds Calculate the current visible extent of the MapLibre map with map.get
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
function showPlaces ( text ) {
const bounds = map.getBounds()
const topRight = bounds.getNorthEast();
const bottomLeft = bounds.getSouthWest();
};
Use the ArcGIS REST JS find function to make a request to the places service. Set the search parameter to your query and pass the current map bounding box to the xmin,xmax,ymin, and ymax parameters.
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.
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
function showPlaces ( text ) {
const bounds = map.getBounds()
const topRight = bounds.getNorthEast();
const bottomLeft = bounds.getSouthWest();
arcgisRest.findPlacesWithinExtent({
xmin : bottomLeft.lng,
ymin : bottomLeft.lat,
xmax : topRight.lng,
ymax : topRight.lat,
searchText : text,
authentication
})
};
Display results The response from the places service will contain a list of place results. Each result will include a place's x/y coordinates, name, category, and unique ID.
Create a new list to store service results. When a new places request is made, clear the list.
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
<!-- Load MapLibre from CDN -->
< script src = https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js > </ script >
< link href = https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css rel = "stylesheet" />
<!-- Calcite components -->
< script type = "module" src = "https://js.arcgis.com/calcite-components/1.0.5/calcite.esm.js" > </ script >
< link rel = "stylesheet" type = "text/css" href = "https://js.arcgis.com/calcite-components/1.0.5/calcite.css" />
<!-- ArcGIS REST JS: request and places -->
< script src = "https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js" > </ script >
< script src = "https://unpkg.com/@esri/arcgis-rest-places@1.0.0/dist/bundled/places.umd.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 ;
z-index : 1 ;
}
#place-control {
position :absolute;
top : 15px ;
left : 15px ;
display :flex;
flex-direction : row;
z-index : 2 ;
}
.search {
margin-right : 15px ;
}
#search-input {
width : 270px ;
}
.category-button {
margin :auto 5px ;
}
</ style >
</ head >
< body >
< div id = "place-control" >
< div class = "search" >
< calcite-input type = "text" id = "search-input" placeholder = "Type in a place name or category" >
< calcite-button kind = "inverse" icon-start = "search" id = "search-button" type = "submit" slot = "action" > </ calcite-button >
</ calcite-input >
</ div >
</ div >
< div id = "map" > </ div >
< script >
const control = document .getElementById( "place-control" );
const input = document .getElementById( "search-input" )
const placeKeywords = [ "Restaurants" , "Hotels" , "Museums" , "ATMs" , "Breweries" ];
document .getElementById( "search-button" ).addEventListener( "click" , e => {
showPlaces(input.value)
})
placeKeywords.forEach( category => {
const categoryButton = document .createElement( "calcite-button" );
categoryButton.setAttribute( "class" , "category-button" );
categoryButton.setAttribute( "round" , true );
categoryButton.setAttribute( "scale" , "s" );
categoryButton.setAttribute( "kind" , "inverse" )
categoryButton.innerHTML = category;
categoryButton.id = category;
control.appendChild(categoryButton);
categoryButton.addEventListener( "click" , e => {
input.value = category;
showPlaces(category)
})
})
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Community" ;
const map = new maplibregl.Map({
container : "map" , // the id of the div element
style : `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ ${basemapEnum} ?type=style&token= ${apiKey} ` ,
zoom : 13 , // starting zoom
center : [- 122.32116 , 47.62737 ] // starting location [longitude, latitude]
});
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
const currentPlaces = [];
function showPlaces ( text ) {
for ( let place of currentPlaces) {
place.remove();
}
const bounds = map.getBounds()
const topRight = bounds.getNorthEast();
const bottomLeft = bounds.getSouthWest();
arcgisRest.findPlacesWithinExtent({
xmin : bottomLeft.lng,
ymin : bottomLeft.lat,
xmax : topRight.lng,
ymax : topRight.lat,
searchText : text,
authentication
})
};
function getDetails ( popup,id ) {
arcgisRest.getPlaceDetails(({
placeId : id,
authentication,
requestedFields : [ "name" , "address:streetAddress" , "contactInfo:telephone" ]
}))
.then( ( result )=> {
console .log(result)
let popupContents = `<b> ${result.placeDetails.name} </b><br>` ;
if (result.placeDetails.address.streetAddress) popupContents += ` ${result.placeDetails.address.streetAddress} <br>` ;
if (result.placeDetails.contactInfo.telephone) popupContents += ` ${result.placeDetails.contactInfo.telephone} ` ;
popup.setHTML(popupContents);
});
};
document .getElementById(placeKeywords[ 0 ]).dispatchEvent( new Event( 'click' ));
</ script >
</ body >
</ html >
Access the service results. For each result, add a MapLibre Marker
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.
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
function showPlaces ( text ) {
for ( let place of currentPlaces) {
place.remove();
}
const bounds = map.getBounds()
const topRight = bounds.getNorthEast();
const bottomLeft = bounds.getSouthWest();
arcgisRest.findPlacesWithinExtent({
xmin : bottomLeft.lng,
ymin : bottomLeft.lat,
xmax : topRight.lng,
ymax : topRight.lat,
searchText : text,
authentication
})
.then( ( response )=> {
response.results.forEach( ( result )=> {
const marker = new maplibregl.Marker()
.setLngLat([result.location.x, result.location.y])
.addTo(map);
currentPlaces.push(marker);
});
});
};
Run the app. When you click a category button or search for a phrase, the map should display a set of points representing place results.
To view more information about each place result, bind a popup to each marker that displays more information about the place.
Use set
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
.then( ( response )=> {
response.results.forEach( ( result )=> {
const marker = new maplibregl.Marker()
.setLngLat([result.location.x, result.location.y])
.addTo(map);
currentPlaces.push(marker);
const popup = new maplibregl.Popup();
marker.setPopup(popup)
});
});
};
function getDetails ( popup,id ) {
};
Add an event listener to each marker that calls a new function get. Pass the current popup as well as the unique place ID from the service response.
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
.then( ( response )=> {
response.results.forEach( ( result )=> {
const marker = new maplibregl.Marker()
.setLngLat([result.location.x, result.location.y])
.addTo(map);
currentPlaces.push(marker);
const popup = new maplibregl.Popup();
popup.on( 'open' , e => {
getDetails(e.target, result.placeId)
});
marker.setPopup(popup)
});
});
};
function getDetails ( popup,id ) {
};
Get place address and phone number You can access more information about a place using the unique place associated with it. Perform a subsequent request to the places service to get the street address and phone number of a clicked POI.
Use the ArcGIS REST JS get function to get detailed information about a specific place. Pass the place associated with the current marker, and set the requested parameter to return the street and telephone properties.
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
function getDetails ( popup,id ) {
arcgisRest.getPlaceDetails(({
placeId : id,
authentication,
requestedFields : [ "name" , "address:streetAddress" , "contactInfo:telephone" ]
}))
};
Access the service response. Display the results in your popup if they are available.
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
function getDetails ( popup,id ) {
arcgisRest.getPlaceDetails(({
placeId : id,
authentication,
requestedFields : [ "name" , "address:streetAddress" , "contactInfo:telephone" ]
}))
.then( ( result )=> {
console .log(result)
let popupContents = `<b> ${result.placeDetails.name} </b><br>` ;
if (result.placeDetails.address.streetAddress) popupContents += ` ${result.placeDetails.address.streetAddress} <br>` ;
if (result.placeDetails.contactInfo.telephone) popupContents += ` ${result.placeDetails.contactInfo.telephone} ` ;
popup.setHTML(popupContents);
});
};
Run the app In CodePen , run your code to display the application. The app should display a map with a search control. Upon clicking a button or entering a phrase, place results should appear on the map. Clicking a result will submit another service request to get the place address and phone number.
What's next? Learn how to use additional ArcGIS location services in these tutorials:
