Query demographic data

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

  1. To get started, either complete the Display a map tutorial or .

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.

  1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

  2. 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
                                                                                                   
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
        apiKey: apiKey
      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) {
        getData = false;
      map.on("click", (e) => {
      const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
      function getDemographicData(latlng) {
        // Request demographic data
            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>

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
                                                                                                   
Change lineChange lineAdd 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>

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:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.