Learn how to find an address or place using a search box and the geocoding service .
Geocoding is the process of converting address or place text to a location. The geocoding service provides address and place geocoding and reverse geocoding.
In this tutorial, you use ArcGIS REST JS to access the geocoding service . You use a simple input control to accept text and a button to execute a search for an address or place. When an address or place is located, a pop-up will appear with the name, location , and address, and the view will pan to it.
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 scene 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 to use your key. Update cesium to use your Cesium ion access token .
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
const apiKey = "YOUR_API_KEY" ;
Cesium.ArcGisMapService.defaultAccessToken = apiKey;
const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN" ;
Cesium.Ion.defaultAccessToken = cesiumAccessToken;
const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
const viewer = new Cesium.Viewer( "cesiumContainer" , {
baseLayer : Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
});
Add references to ArcGIS REST JS In the <head> element, reference the geocodingrequest
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
< script src = "https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Cesium.js" > </ script >
< link href = "https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Widgets/widgets.css" rel = "stylesheet" >
< 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-geocoding@4.0.0/dist/bundled/geocoding.umd.js" > </ script >
Update the scene CesiumJS supports both 3D models and geocoding. Update the scene to display 3D buildings so that you can search for them with the geocoding service.
Update the scene view to center on location [-122.4117, 37.769, 5000] in San Francisco, CA.
Expand
Use dark colors for code blocks
Change line Change line 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
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
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(- 122.4117 , 37.769 , 5000 ),
orientation : {
pitch : Cesium.Math.toRadians(- 70 )
}
})
Add the San Francisco 3D Buildings scene layer to visualize the city of San Francisco.
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
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
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(- 122.4117 , 37.769 , 5000 ),
orientation : {
pitch : Cesium.Math.toRadians(- 70 )
}
})
const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl( "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer" );
const i3sProvider = await Cesium.I3SDataProvider.fromUrl( "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_3DObjects_1_7/SceneServer" ,{
geoidTiledTerrainProvider : geoidService
});
viewer.scene.primitives.add(i3sProvider);
Create geocoder controls To trigger the geocode, users will type an address then click a button. Create an HTML <input> control to accept user input and a <button> control to initiate the query.
In the <body>, add a <div> containing a text input element and a button element.
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
< body >
< div id = "cesiumContainer" > </ div >
< div class = "search" >
< input id = "geocode-input" type = "text" placeholder = "Enter an address or place e.g. 1 York St" size = "50" />
< button id = "geocode-button" > Geocode </ button >
</ div >
< script type = "module" >
In the <style> section, style the controls so that they appear in the top left corner of the app.
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
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
< style >
html , body , #cesiumContainer {
width : 100% ;
height : 100% ;
padding : 0px ;
margin : 0px ;
}
.search {
position : absolute;
top : 8px ;
left : 8px ;
}
#geocode-input ,
#geocode-button {
font-size : 16px ;
margin : 0 2px 0 0 ;
padding : 4px 8px ;
}
#geocode-input {
width : 300px ;
}
</ style >
Call the geocoding service When a user clicks the Geocode button, call arcgis
Create a new arcgis using your API key to authenticate requests to 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
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
const apiKey = "YOUR_API_KEY" ;
Cesium.ArcGisMapService.defaultAccessToken = apiKey;
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
Add an event listener to the geocoding button. When the button is clicked, call a new function called find with the user's input as a parameter.
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
const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl( "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer" );
const i3sProvider = await Cesium.I3SDataProvider.fromUrl( "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_3DObjects_1_7/SceneServer" ,{
geoidTiledTerrainProvider : geoidService
});
viewer.scene.primitives.add(i3sProvider);
function findAddress ( query ) {
}
document .getElementById( "geocode-button" ).addEventListener( "click" , () => {
viewer.entities.removeAll();
const query = document .getElementById( "geocode-input" ).value;
findAddress(query);
});
In the find function, call arcgisauthentication object. Set the single parameter to the search query. Set the location parameter to the camera's current position to prioritize search results near the current extent.
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
function findAddress ( query ) {
const cameraPos = Cesium.Cartographic.fromCartesian(viewer.camera.position);
const center = [Cesium.Math.toDegrees(cameraPos.longitude),Cesium.Math.toDegrees(cameraPos.latitude)]
arcgisRest
.geocode({
singleLine : query,
authentication,
params : {
outFields : "*" ,
location : center.join( "," )
}
})
}
Access the service response to obtain query results. Alert the user if no results are returned.
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
arcgisRest
.geocode({
singleLine : query,
authentication,
params : {
outFields : "*" ,
location : center.join( "," )
}
})
.then( ( response ) => {
const result = response.candidates[ 0 ];
if (!result === 0 ) {
alert( "That query didn't match any geocoding results." );
return ;
}
})
Check for issues in accessing the geocoding service (such as a network disruption or authentication problems) and alert the user.
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
arcgisRest
.geocode({
singleLine : query,
authentication,
params : {
outFields : "*" ,
location : center.join( "," )
}
})
.then( ( response ) => {
const result = response.candidates[ 0 ];
if (!result === 0 ) {
alert( "That query didn't match any geocoding results." );
return ;
}
})
.catch( ( error ) => {
alert( "There was a problem using the geocoder. See the console for details." );
console .error(error);
});
Display results If the query is successful, the candidates property of the response will contain a list of one of more address candidates. To display the top candidate, create a new entity and add it to your scene.
Add a new Entityname and description of the entity to display information about the result candidate.
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
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
.then( ( response ) => {
const result = response.candidates[ 0 ];
if (!result === 0 ) {
alert( "That query didn't match any geocoding results." );
return ;
}
const location = Cesium.Cartesian3.fromDegrees(result.location.x,result.location.y);
const candidate = viewer.entities.add({
name : 'Search result' ,
description : ` ${result.address} ` ,
position :location,
})
})
Set the billboardPinimage property of the pin.
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
const pinBuilder = new Cesium.PinBuilder()
const location = Cesium.Cartesian3.fromDegrees(result.location.x,result.location.y);
const candidate = viewer.entities.add({
name : 'Search result' ,
description : ` ${result.address} ` ,
position :location,
billboard : {
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
image : pinBuilder.fromColor(Cesium.Color.fromCssColorString( '#5491f5' ), 48 ).toDataURL()
}
})
Select and track the result entity in order to display a pop-up and center the camera on the result.
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
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
billboard : {
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
image : pinBuilder.fromColor(Cesium.Color.fromCssColorString( '#5491f5' ), 48 ).toDataURL()
}
})
viewer.selectedEntity = candidate;
viewer.trackedEntity = candidate;
Run the app In CodePen , run your code to display the map.
In the input box, type "Ferry building San Francisco" and then click the Geocode button to find its location. If a location is found, the map will zoom to it and display a pop-up with the address.
What's next? Learn how to use additional ArcGIS location services in these tutorials:
