Learn how to query demographic information for locations around the world with the GeoEnrichment service .
The GeoEnrichment service provides information such as population and household size about geographic areas that you define. The enrich method provides the ability to get facts about a location or area. Using Enrich, you can get information about the people, places, and businesses in a specific area or within a certain distance of a point.
In this tutorial, you use the GeoEnrichment service to search for demographic data within one mile of a clicked point and display the data in a overlay panel.
Prerequisites You need an ArcGIS account to access the developer dashboard and create an API key .
Steps Create a new pen To get started, either complete the Display a map tutorial or use this pen . Set the API key To access 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 apiKey to use your key.
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< title > Esri Leaflet </ title >
<!-- Load Leaflet from CDN -->
< link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@^3.0.0/dist/esri-leaflet-vector.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 ;
}
</ style >
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Streets" ;
const map = L.map( "map" , {
minZoom : 2
}).setView([ 34.02 , - 118.805 ], 13 );
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
</ script >
</ body >
</ html >
Add ArcGIS REST JS Add references to ArcGIS REST JS so you can access the GeoEnrichment service .
Use dark colors for code blocks
Show more lines
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
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< title > Esri Leaflet </ title >
<!-- Load Leaflet from CDN -->
< link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@^3.0.0/dist/esri-leaflet-vector.js" > </ script >
<!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
< 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-demographics@4.0.0/dist/bundled/demographics.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 ;
}
</ style >
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Navigation" ;
const map = L.map( "map" , {
minZoom : 2
}).setView([ 47.33 , 18.88 ], 5 ); //Eastern Europe
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
let getData = false ;
function goToLocation ( e ) {
getData = true ;
const latlngArray = JSON .parse( "[" + e.target.value + "]" );
var latlng = L.latLng(latlngArray);
map.flyTo(latlng, 13 );
}
map.on( "moveend" , function ( e ) {
if (getData) {
getDemographicData(e.target.getCenter());
}
getData = false ;
});
map.on( "click" , ( e ) => {
getDemographicData(e.latlng);
});
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
function getDemographicData ( latlng ) {
// Request demographic data
arcgisRest
.queryDemographicData({
studyAreas : [{ geometry : { x : latlng.lng, y : latlng.lat } }],
authentication : authentication
})
.then( ( response ) => {
const data = document .getElementById( "data" );
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;
const content = `<b>Data for a 1 mile search radius</b><br>Population: ${attributes.TOTPOP} <br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES} <br>Average Household Size: ${attributes.AVGHHSZ} ` ;
var popup = L.popup().setLatLng(latlng).setContent(content).openOn(map);
} else {
console .log( "No data found." );
}
});
}
</ script >
</ body >
</ html >
Show more lines
Find demographic data To query demographic data from the GeoEnrichment service , add the following code to select places around the world and the ArcGIS REST JS API to get demographic data.
Change the basemap layer to Navigation and the location to center on Eastern Europe. Use the ArcGIS REST JS enrich method to get demographic data for a one mile radius when the map moves to a location or when the user clicks on the map. Display the demographic information in a pop-up. Use dark colors for code blocks
Show more lines
Change line Change line Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" />
< title > Esri Leaflet </ title >
<!-- Load Leaflet from CDN -->
< link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js" > </ script >
< script src = "https://unpkg.com/esri-leaflet-vector@^3.0.0/dist/esri-leaflet-vector.js" > </ script >
<!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
< 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-demographics@4.0.0/dist/bundled/demographics.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 ;
}
</ style >
</ head >
< body >
< div id = "map" > </ div >
< script >
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "ArcGIS:Navigation" ;
const map = L.map( "map" , {
minZoom : 2
}).setView([ 47.33 , 18.88 ], 5 ); //Eastern Europe
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
let getData = false ;
function goToLocation ( e ) {
getData = true ;
const latlngArray = JSON .parse( "[" + e.target.value + "]" );
var latlng = L.latLng(latlngArray);
map.flyTo(latlng, 13 );
}
map.on( "moveend" , function ( e ) {
if (getData) {
getDemographicData(e.target.getCenter());
}
getData = false ;
});
map.on( "click" , ( e ) => {
getDemographicData(e.latlng);
});
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
function getDemographicData ( latlng ) {
// Request demographic data
arcgisRest
.queryDemographicData({
studyAreas : [{ geometry : { x : latlng.lng, y : latlng.lat } }],
authentication : authentication
})
.then( ( response ) => {
const data = document .getElementById( "data" );
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;
const content = `<b>Data for a 1 mile search radius</b><br>Population: ${attributes.TOTPOP} <br>Males: ${attributes.TOTMALES} <br>Females: ${attributes.TOTFEMALES} <br>Average Household Size: ${attributes.AVGHHSZ} ` ;
var popup = L.popup().setLatLng(latlng).setContent(content).openOn(map);
} else {
console .log( "No data found." );
}
});
}
</ script >
</ body >
</ html >
Show more lines
Run the app In CodePen , run your code to display the map.
Select a place and then click on the map to view demographic information.
What's next Learn how to use additional ArcGIS location services in these tutorials:
