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.
You need an ArcGIS account to access the developer dashboard and create an API key .
To get started, either complete the Display a map tutorial or use this pen . To access location services , you need an API key or OAuth 2.0 access token .
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.
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
<!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.7.1/dist/leaflet.css"
integrity = "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity = "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@3.0.0/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 references to ArcGIS REST JS so you can access the GeoEnrichment service .
Show more lines
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
<!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.7.1/dist/leaflet.css"
integrity = "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity = "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"
integrity = "sha512-q7X96AASUF0hol5Ih7AeZpRF6smJS55lcvy+GLWzJfZN+31/BQ8cgNx2FGF+IQSA4z2jHwB20vml+drmooqzzQ=="
crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@3.0.0/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@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 >
< 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 = new arcgisRest.ApiKey({
key : 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
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. 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. 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
<!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.7.1/dist/leaflet.css"
integrity = "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin = "" />
< script src = "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity = "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js"
integrity = "sha512-q7X96AASUF0hol5Ih7AeZpRF6smJS55lcvy+GLWzJfZN+31/BQ8cgNx2FGF+IQSA4z2jHwB20vml+drmooqzzQ=="
crossorigin = "" > </ script >
<!-- Load Esri Leaflet from CDN -->
< script src = "https://unpkg.com/esri-leaflet@3.0.0/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@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 >
< 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 = new arcgisRest.ApiKey({
key : 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
In CodePen , run your code to display the map.
Select a place and then click on the map to view demographic information.
Learn how to use additional ArcGIS location services in these tutorials:
