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 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 .

Set the API key

To access ArcGIS location services, you need an API key.

Go to your dashboard to get an API key.

In CodePen, update apiKey to use your key.

Change line
<!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 ArcGIS REST JS

Add references to ArcGIS REST JS so you can access the GeoEnrichment service.

Add line.Add line.Add line.Add line.
<!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>

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.

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.Add line.Add line.Add line.Add line.Add line.
<!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>

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:

Search for an address

Find an address or place using a search box and the Geocoding service.

Query a feature layer (SQL)

Execute a SQL query to access polygon features from a feature layer.

Find a route and directions

Find a route and directions with the route service.

RoutingFind service areas NextTools

Solution

Estimated time

10 minutes

DocumentationEsri Leaflet Guide

Query demographic data

Solution

Estimated time

Was this page helpful?

Solution

Estimated time

Was this page helpful?

Was this page helpful?