Get demographic data
Learn how to find demographic information for places around the world with GeoEnrichment service.
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 .
Import ArcGIS REST JS
Import the ArcGIS REST JS modules to get access to some ArcGIS location services, like access to demographic data from the GeoEnrichment service.
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
168
169
170
171
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS API for JavaScript Tutorials: Get demographic data</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-view .esri-popup__button.esri-popup__button--dock {
display: none;
}
</style>
<!-- require ArcGIS REST JS libraries from https://unpkg.com -->
<script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.23/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/geometry/geometryEngine",
"esri/widgets/Search",
"esri/rest/locator",
"esri/core/watchUtils"
],
function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) {
const authentication = new arcgisRest.ApiKey({
key: "YOUR_API_KEY"
});
esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
basemap: "arcgis-navigation"
});
const view = new MapView({
map: map,
center: [9.1900, 45.4642], // Milan, Italy
zoom: 4,
container: "viewDiv",
});
const search = new Search({
view: view
});
view.ui.add(search, "top-right");
view.when(() => {
watchUtils.once(search, "activeSource", (loaded) => {
if (loaded) {
search.popupEnabled = false;
search.activeSource.placeholder = "Find facts for cities or places";
}
getDemographicData("Milan", view.center)
});
});
search.on("select-result", (event) => {
if (!event.result) {
return;
}
getDemographicData(event.result.name, event.result.feature.geometry);
});
view.on("click", e => {
const params = {
location: e.mapPoint,
outFields: "*"
};
const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
locator.locationToAddress(locatorUrl, params)
.then(function (response) { // Show the address found
const city = response.attributes.City || response.attributes.Region;
getDemographicData(city, params.location);
}, function (err) { // Show no address found
view.graphics.removeAll();
console.log("No address found.");
});
});
function getDemographicData(city, point) {
// Request demographic data
arcgisRest.queryDemographicData({
studyAreas: [{
"geometry": {
"x": point.longitude,
"y": point.latitude
}
}],
authentication: authentication
})
.then((response) => {
if (response.results[0].value.FeatureSet.length > 0 &&
response.results[0].value.FeatureSet[0].features.length > 0) {
const attributes = response.results[0].value.FeatureSet[0].features[0].attributes;
showData(city, attributes, point);
}
else {
console.log("No data found.");
}
});
}
function showData(city, attributes, point) {
if (!city || !attributes || !point) {
return;
}
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}`;
view.popup.open({
location: point,
title: title,
content: content
});
const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
const graphicBuffer = new Graphic({
geometry: buffer,
symbol: {
type: "simple-fill",
color: [50, 50, 50, 0.1],
outline: {
color: [0, 0, 0, 0.25],
width: .5
}
}
})
view.graphics.removeAll();
view.graphics.add(graphicBuffer);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>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
apiKeyto your key, so it can be used to access basemap layer and location services.You will also need to use your API key to access the ArcGIS REST JS.
Use dark colors for code blocks Add line. 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 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<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-view .esri-popup__button.esri-popup__button--dock { display: none; } </style> <!-- require ArcGIS REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/geometryEngine", "esri/widgets/Search", "esri/rest/locator", "esri/core/watchUtils" ], function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new arcgisRest.ApiKey({ key: "YOUR_API_KEY" }); esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data arcgisRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } 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}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Add modules
In the
requirestatement, add the Graphic, geometryEngine, Search, locator, and watchUtils modules.The ArcGIS API for JavaScript uses AMD modules. The
requirefunction is used to load modules so they can be used in the mainfunction. It's important to keep the module references and function parameters in the same order.Use dark colors for code blocks Add line. Add line. Add line. 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 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<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-view .esri-popup__button.esri-popup__button--dock { display: none; } </style> <!-- require ArcGIS REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/geometryEngine", "esri/widgets/Search", "esri/rest/locator", "esri/core/watchUtils" ], function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new arcgisRest.ApiKey({ key: "YOUR_API_KEY" }); esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data arcgisRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } 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}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Update the map
A streets basemap layer is typically used in geocoding applications. Update the basemap property to use the arcgis-navigation basemap layer and change the position of the map to center on Milan, Italy.
Update the
basemapproperty fromarcgis-topographictoarcgis-navigation.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 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<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-view .esri-popup__button.esri-popup__button--dock { display: none; } </style> <!-- require ArcGIS REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/geometryEngine", "esri/widgets/Search", "esri/rest/locator", "esri/core/watchUtils" ], function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new arcgisRest.ApiKey({ key: "YOUR_API_KEY" }); esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data arcgisRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } 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}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>Update the
centerproperty to[9.1900, 45.4642], and set thezoomproperty to4.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 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<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-view .esri-popup__button.esri-popup__button--dock { display: none; } </style> <!-- require ArcGIS REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/geometryEngine", "esri/widgets/Search", "esri/rest/locator", "esri/core/watchUtils" ], function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new arcgisRest.ApiKey({ key: "YOUR_API_KEY" }); esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data arcgisRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } 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}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Add the Search widget
Next, we are going to add the Search widget so that the user can search for locations where they want to see the demographics.
Create the Search widget and define the view. Then, add the widget to the top right.
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 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-view .esri-popup__button.esri-popup__button--dock { display: none; } </style> <!-- require ArcGIS REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/geometryEngine", "esri/widgets/Search", "esri/rest/locator", "esri/core/watchUtils" ], function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new arcgisRest.ApiKey({ key: "YOUR_API_KEY" }); esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data arcgisRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } 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}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>When the user selects a search result, we want to query for the demographics of that location. To do this, we will listen for the
select-resultevent on the Search widget, then call thegetDemographicData()function, which we will define in the Get demographic data section.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 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-view .esri-popup__button.esri-popup__button--dock { display: none; } </style> <!-- require ArcGIS REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/geometryEngine", "esri/widgets/Search", "esri/rest/locator", "esri/core/watchUtils" ], function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new arcgisRest.ApiKey({ key: "YOUR_API_KEY" }); esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data arcgisRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } 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}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Add click event on the view
We also want to allow the user to search for demographics by clicking anywhere in the map. To do this, we will watch for a click event on the MapView.
- Use the
clickevent to watch for when the MapView is clicked.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 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-view .esri-popup__button.esri-popup__button--dock { display: none; } </style> <!-- require ArcGIS REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/geometryEngine", "esri/widgets/Search", "esri/rest/locator", "esri/core/watchUtils" ], function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new arcgisRest.ApiKey({ key: "YOUR_API_KEY" }); esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data arcgisRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } 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}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> - When the event is returned, use the resulting
mapPointto set your parameters, then execute thelocationToAddress()method on the locator. This will return the city that we want to find the demographics for.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 161 162 163 164 165 166 167 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-view .esri-popup__button.esri-popup__button--dock { display: none; } </style> <!-- require ArcGIS REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/geometryEngine", "esri/widgets/Search", "esri/rest/locator", "esri/core/watchUtils" ], function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new arcgisRest.ApiKey({ key: "YOUR_API_KEY" }); esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data arcgisRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } 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}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> - Once the
locationToAddress()method has resolved, we can use the results to get the name of the city closest to the click point. We can use this city and the point that was clicked on the map to call thegetDemographicData()method that is defined in the next step.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 168 169 170 171<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-view .esri-popup__button.esri-popup__button--dock { display: none; } </style> <!-- require ArcGIS REST JS libraries from https://unpkg.com --> <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script> <script src="https://unpkg.com/@esri/arcgis-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></script> <script> require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/geometryEngine", "esri/widgets/Search", "esri/rest/locator", "esri/core/watchUtils" ], function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, locator, watchUtils) { const authentication = new arcgisRest.ApiKey({ key: "YOUR_API_KEY" }); esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-navigation" }); const view = new MapView({ map: map, center: [9.1900, 45.4642], // Milan, Italy zoom: 4, container: "viewDiv", }); const search = new Search({ view: view }); view.ui.add(search, "top-right"); view.when(() => { watchUtils.once(search, "activeSource", (loaded) => { if (loaded) { search.popupEnabled = false; search.activeSource.placeholder = "Find facts for cities or places"; } getDemographicData("Milan", view.center) }); }); search.on("select-result", (event) => { if (!event.result) { return; } getDemographicData(event.result.name, event.result.feature.geometry); }); view.on("click", e => { const params = { location: e.mapPoint, outFields: "*" }; const locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; locator.locationToAddress(locatorUrl, params) .then(function (response) { // Show the address found const city = response.attributes.City || response.attributes.Region; getDemographicData(city, params.location); }, function (err) { // Show no address found view.graphics.removeAll(); console.log("No address found."); }); }); function getDemographicData(city, point) { // Request demographic data arcgisRest.queryDemographicData({ studyAreas: [{ "geometry": { "x": point.longitude, "y": point.latitude } }], authentication: authentication }) .then((response) => { if (response.results[0].value.FeatureSet.length > 0 && response.results[0].value.FeatureSet[0].features.length > 0) { const attributes = response.results[0].value.FeatureSet[0].features[0].attributes; showData(city, attributes, point); } else { console.log("No data found."); } }); } function showData(city, attributes, point) { if (!city || !attributes || !point) { return; } 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}`; view.popup.open({ location: point, title: title, content: content }); const buffer = geometryEngine.geodesicBuffer(point, 1, "miles"); const graphicBuffer = new Graphic({ geometry: buffer, symbol: { type: "simple-fill", color: [50, 50, 50, 0.1], outline: { color: [0, 0, 0, 0.25], width: .5 } } }) view.graphics.removeAll(); view.graphics.add(graphicBuffer); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Get demographic data
To get the demographic data for an area on the map, we will use the ArcGIS REST JS queryDemographicData() method.
Create a function,
getDemographicData(), to get the demographic data from the ArcGIS REST JS and handle the results. We will add the city and point we want to get the demographics for as the function parameters.Use dark colors for code blocks