Learn how to find demographic information for places around the world with GeoEnrichment service.
Prerequisites ArcGIS Accounts:You need an ArcGIS Location Platform or ArcGIS Online account.
Steps Create a new penYou need an access token with the correct privileges to access the location services used in this tutorial.
esriConfig.apiKey to your access token.
Use dark colors for code blocks
1
2
3
4
5
6
7
8
9
var esriConfig = {
apiKey: "YOUR_ACCESS_TOKEN",
};
To learn about other ways to get an access token, go to Types of authentication.
Import ArcGIS REST JSImport the ArcGIS REST JS modules to get access to some ArcGIS location services, such as access to global demographic data from the GeoEnrichment service.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
<script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>
<!-- Load Calcite components from CDN -->
<script type="module" src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js"></script>
<!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
<link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.33/"></script>
<!-- Load Map components from CDN -->
<script type="module" src="https://js.arcgis.com/4.33/map-components/"></script>
A streets basemap layer is typically used in geocoding applications. Update the map's basemap attribute to use the arcgis/navigation basemap layer and change the position of the map to center on Milan, Italy.
Update the basemap property from arcgis/topographic to arcgis/navigation, set the center attribute to 9.1900, 45.4642 and the zoom attribute to 8.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">
<arcgis-zoom position="top-left"></arcgis-zoom>
</arcgis-map>
Next, add the Search component so the user can search for locations where they want to see the demographics.
Create the Search component inside the arcgis-map element. Set attributes to modify the placeholder text, disable the default popup, and place the search component in the top-right corner of the map.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">
<arcgis-zoom position="top-left"></arcgis-zoom>
<arcgis-search
all-placeholder="Get demographic data"
popup-disabled
position="top-right"></arcgis-search>
</arcgis-map>
In a new <script> at the bottom of the <body>, use $arcgis.import() to add the geodesicBufferOperator, Graphic, locator, and SimpleFillSymbol modules.
The ArcGIS Maps SDK for JavaScript is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK's different modules, visit the References page.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<body>
<arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">
<arcgis-zoom position="top-left"></arcgis-zoom>
<arcgis-search
all-placeholder="Get demographic data"
popup-disabled
position="top-right"></arcgis-search>
</arcgis-map>
<script type="module">
const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
"@arcgis/core/geometry/operators/geodesicBufferOperator.js",
"@arcgis/core/Graphic.js",
"@arcgis/core/rest/locator.js",
"@arcgis/core/symbols/SimpleFillSymbol.js",
]);
</script>
</body>
Use your API key to create a new authentication constant for ArcGIS REST JS.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<script type="module">
const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
"@arcgis/core/geometry/operators/geodesicBufferOperator.js",
"@arcgis/core/Graphic.js",
"@arcgis/core/rest/locator.js",
"@arcgis/core/symbols/SimpleFillSymbol.js",
]);
const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);
</script>
When the user selects a search result, query for the demographics of that location. To do this, listen for the arcgisSelectResult event on the Search component, then call a getDemographicData() function, which we will further define in the Get demographic data section.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<script type="module">
const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
"@arcgis/core/geometry/operators/geodesicBufferOperator.js",
"@arcgis/core/Graphic.js",
"@arcgis/core/rest/locator.js",
"@arcgis/core/symbols/SimpleFillSymbol.js",
]);
const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);
const arcgisSearch = document.querySelector("arcgis-search");
arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
if (!event.detail.result) {
return;
}
getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
});
async function getDemographicData(city, point) {
}
</script>
We also want users to search for demographics by clicking anywhere on the map. To do this, add an event listener for the arcgisViewClick event on the Map.
Add an event listener for the arcgisViewClick event to watch for when users click on the map.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
const viewElement = document.querySelector("arcgis-map");
viewElement.addEventListener("arcgisViewClick", async (event) => {
});
When the event is returned, use the resulting mapPoint to set your parameters, then execute the locationToAddress() method on the locator with the specified parameters. This will return the address for which we want to find the demographics.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
viewElement.addEventListener("arcgisViewClick", async (event) => {
const params = {
location: event.detail.mapPoint,
outFields: "*",
};
const locatorUrl =
"https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
const address = await locator.locationToAddress(locatorUrl, params);
});
Once the locationToAddress() method has resolved, use the results to get the city's name closest to the click point. Use the city and the point clicked on the map to call the getDemographicData() method defined in the next step. If an error is encountered, remove all graphics from the map and log the error.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
viewElement.addEventListener("arcgisViewClick", async (event) => {
const params = {
location: event.detail.mapPoint,
outFields: "*",
};
const locatorUrl =
"https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
const address = await locator.locationToAddress(locatorUrl, params);
try {
const city = address.attributes.City || address.attributes.Region;
getDemographicData(city, params.location);
} catch (error) {
viewElement.graphics.removeAll();
console.log(error);
}
});
To get the demographic data for an area on the map, we will use the ArcGIS REST JS queryDemographicData() method.
Query for the demographic data using the queryDemographicData() method from ArcGIS REST JS. Set the studyAreas to the longitude and latitude of our point parameter. Use the authentication variable set from our API key earlier to authenticate this request. The queryDemographicData() method will return a promise with the response, so await the result in an asynchronous function.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
async function getDemographicData(city, point) {
const demographicData = await arcgisRest.queryDemographicData({
studyAreas: [
{
geometry: {
x: point.longitude,
y: point.latitude,
},
},
],
authentication: authentication,
});
}
Check that results were returned and add them to an attributes variable. Then, call the showData() function to show the results in a popup.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
async function getDemographicData(city, point) {
const demographicData = await arcgisRest.queryDemographicData({
studyAreas: [
{
geometry: {
x: point.longitude,
y: point.latitude,
},
},
],
authentication: authentication,
});
if (!demographicData.results || demographicData.results.length === 0) {
return;
}
if (
demographicData.results[0].value.FeatureSet.length > 0 &&
demographicData.results[0].value.FeatureSet[0].features.length > 0
) {
const attributes = demographicData.results[0].value.FeatureSet[0].features[0].attributes;
showData(city, attributes, point);
}
}
Once we have the results from the demographic query, show those results in a popup to display to the user.
Create the showData function mentioned in the last step. If the function parameters are not valid, return. Otherwise, display a new popup and buffer graphic.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
async function showData(city, attributes, point) {
if (!city || !attributes || !point) {
return;
}
}
Set the dockOptions and visibleElements on the map's default Popup to hide the collapse and dock buttons.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
async function showData(city, attributes, point) {
if (!city || !attributes || !point) {
return;
}
viewElement.popup.dockOptions = {
buttonEnabled: false,
};
viewElement.popup.visibleElements = {
collapseButton: false,
};
}
Define the title and content of the Popup. In the title, enter the name of the city. In the content, display the demographics for that city.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
async function showData(city, attributes, point) {
if (!city || !attributes || !point) {
return;
}
viewElement.popup.dockOptions = {
buttonEnabled: false,
};
viewElement.popup.visibleElements = {
collapseButton: false,
};
const title = `Global facts near ${city}`;
const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`;
}
Open the popup with the title and content displayed at the given point.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
async function showData(city, attributes, point) {
if (!city || !attributes || !point) {
return;
}
viewElement.popup.dockOptions = {
buttonEnabled: false,
};
viewElement.popup.visibleElements = {
collapseButton: false,
};
const title = `Global facts near ${city}`;
const content = `Population: ${attributes.TOTPOP}<br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES}<br>Average Household Size: ${attributes.AVGHHSZ}`;
viewElement.openPopup({
location: point,
title: title,
content: content,
});
}
Next, display a buffer around the map point where we get the demographics so the user knows what is included in the query. Create a one-mile buffer graphic using the geodesicBufferOperator and add it to the map.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
await geodesicBufferOperator.load();
const buffer = geodesicBufferOperator.execute(point, 1, {
unit: "miles",
});
const bufferGraphic = new Graphic({
geometry: buffer,
symbol: new SimpleFillSymbol({
color: [50, 50, 50, 0.1],
outline: {
color: [0, 0, 0, 0.25],
width: 0.5,
},
}),
});
viewElement.graphics.removeAll();
viewElement.graphics.add(bufferGraphic);
To give users an idea of how the app works, show the popup on the app's initial load. Once the map component is ready, call getDemographicData() for the center of the view.
Outside of the showData() function and beneath the arcgisViewClick event listener, check if the map component is ready and call the getDemographicData() function. If the map is not ready, add an event listener for the arcgisViewReadyChange event to call the getDemographicData() function after the map is ready.
Expand
Use dark colors for code blocks1
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
if (!viewElement.ready) {
viewElement.addEventListener(
"arcgisViewReadyChange",
() => {
getDemographicData("Milan", viewElement.center);
},
{
once: true,
},
);
} else {
getDemographicData("Milan", viewElement.center);
}
In CodePen, run your code to display the map.
Click on the map or perform a search to get the demographics for a given city.
What's next?Learn how to use additional API features and ArcGIS services in these tutorials:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4