Get demographic data

Learn how to find demographic information for places around the world with GeoEnrichment service .

Prerequisites

Steps

Create a new pen

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

Get an access token

You need an access token with the correct privileges to access the location services used in this tutorial.

Go to the Create an API key tutorial and create an API key with the following privilege(s) :
- Privileges
  - Location services > Basemaps
  - Location services > Geocoding
  - Location services > Data enrichment
In CodePen, set the apiKey property on the global esriConfig variable to your access token.
var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN", };

To learn about other ways to get an access token, go to Types of authentication.

Import ArcGIS REST JS

Import the ArcGIS REST JS modules to get access to some ArcGIS location services, such as access to global demographic data from the GeoEnrichment service .

13 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>
24 collapsed lines

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>

</body>


</html>

Update the map

A streets basemap layer is typically used in geocoding applications. Update the map’s basemap attribute to use the arcgis/navigation basemap layer and change the position of the map to center on Milan, Italy.

Update the basemap property from arcgis/topographic to arcgis/navigation, set the center attribute to 9.1900, 45.4642 and the zoom attribute to 8.

33 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

  </arcgis-map>
5 collapsed lines

</body>


</html>

Add the Search component

Next, add the Search component so the user can search for locations where they want to see the demographics.

Create the Search component inside the arcgis-map element. Set attributes to modify the placeholder text, disable the default popup, and place the search component in the top-right corner of the map.

33 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>
5 collapsed lines

</body>


</html>

Add script and modules

In a new <script> at the bottom of the <body>, use $arcgis.import() to add the geodesicBufferOperator, Graphic, locator, and SimpleFillSymbol modules.

The ArcGIS Maps SDK for JavaScript is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK’s different modules, visit the References page.

30 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


  </script>

</body>
3 collapsed lines


</html>

Use your API key to create a new authentication constant for ArcGIS REST JS .

41 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

  </script>
5 collapsed lines

</body>


</html>

When the user selects a search result, query for the demographics of that location. To do this, listen for the arcgisSelectResult event on the Search component, then call a getDemographicData() function, which we will further define in the Get demographic data section.

41 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    async function getDemographicData(city, point) {

    }

  </script>
5 collapsed lines

</body>


</html>

Add click event on the map

We also want users to search for demographics by clicking anywhere on the map. To do this, add an event listener for the arcgisViewClick event on the Map.

Add an event listener for the arcgisViewClick event to watch for when users click on the map.

61 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    const viewElement = document.querySelector("arcgis-map");

    viewElement.addEventListener("arcgisViewClick", async (event) => {

    });
11 collapsed lines

    async function getDemographicData(city, point) {

    }

  </script>

</body>


</html>

When the event is returned, use the resulting mapPoint to set your parameters, then execute the locationToAddress() method on the locator with the specified parameters. This will return the address for which we want to find the demographics.

63 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    const viewElement = document.querySelector("arcgis-map");

    viewElement.addEventListener("arcgisViewClick", async (event) => {

      const params = {
        location: event.detail.mapPoint,
        outFields: "*",
      };

      const locatorUrl =
        "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

      const address = await locator.locationToAddress(locatorUrl, params);

    });
11 collapsed lines

    async function getDemographicData(city, point) {

    }

  </script>

</body>


</html>

Once the locationToAddress() method has resolved, use the results to get the city’s name closest to the click point. Use the city and the point clicked on the map to call the getDemographicData() method defined in the next step. If an error is encountered, remove all graphics from the map and log the error.

63 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    const viewElement = document.querySelector("arcgis-map");

    viewElement.addEventListener("arcgisViewClick", async (event) => {

      const params = {
        location: event.detail.mapPoint,
        outFields: "*",
      };

      const locatorUrl =
        "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

      const address = await locator.locationToAddress(locatorUrl, params);

      try {
        const city = address.attributes.City || address.attributes.Region;
        getDemographicData(city, params.location);
      } catch (error) {
        viewElement.graphics.removeAll();
        console.log(error);
      }

    });
11 collapsed lines

    async function getDemographicData(city, point) {

    }

  </script>

</body>


</html>

To get the demographic data for an area on the map, we will use the ArcGIS REST JS queryDemographicData() method.

Query for the demographic data using the queryDemographicData() method from ArcGIS REST JS. Set the studyAreas to the longitude and latitude of our point parameter. Use the authentication variable set from our API key earlier to authenticate this request. The queryDemographicData() method will return a promise with the response, so await the result in an asynchronous function.

85 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    const viewElement = document.querySelector("arcgis-map");

    viewElement.addEventListener("arcgisViewClick", async (event) => {

      const params = {
        location: event.detail.mapPoint,
        outFields: "*",
      };

      const locatorUrl =
        "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

      const address = await locator.locationToAddress(locatorUrl, params);

      try {
        const city = address.attributes.City || address.attributes.Region;
        getDemographicData(city, params.location);
      } catch (error) {
        viewElement.graphics.removeAll();
        console.log(error);
      }

    });

    async function getDemographicData(city, point) {

      const demographicData = await arcgisRest.queryDemographicData({
        studyAreas: [
          {
            geometry: {
              x: point.longitude,
              y: point.latitude,
            },
          },
        ],
        authentication: authentication,
      });

    }
7 collapsed lines

  </script>

</body>


</html>

Check that results were returned and add them to an attributes variable. Then, call the showData() function to show the results in a popup.

85 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    const viewElement = document.querySelector("arcgis-map");

    viewElement.addEventListener("arcgisViewClick", async (event) => {

      const params = {
        location: event.detail.mapPoint,
        outFields: "*",
      };

      const locatorUrl =
        "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

      const address = await locator.locationToAddress(locatorUrl, params);

      try {
        const city = address.attributes.City || address.attributes.Region;
        getDemographicData(city, params.location);
      } catch (error) {
        viewElement.graphics.removeAll();
        console.log(error);
      }

    });

    async function getDemographicData(city, point) {

      const demographicData = await arcgisRest.queryDemographicData({
        studyAreas: [
          {
            geometry: {
              x: point.longitude,
              y: point.latitude,
            },
          },
        ],
        authentication: authentication,
      });

      if (!demographicData.results || demographicData.results.length === 0) {
        return;
      }

      if (
        demographicData.results[0].value.FeatureSet.length > 0 &&
        demographicData.results[0].value.FeatureSet[0].features.length > 0
      ) {
        const attributes = demographicData.results[0].value.FeatureSet[0].features[0].attributes;
        showData(city, attributes, point);
      }

    }
7 collapsed lines

  </script>

</body>


</html>

Once we have the results from the demographic query, show those results in a popup to display to the user.

Create the showData function mentioned in the last step. If the function parameters are not valid, return. Otherwise, display a new popup and buffer graphic.

113 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    const viewElement = document.querySelector("arcgis-map");

    viewElement.addEventListener("arcgisViewClick", async (event) => {

      const params = {
        location: event.detail.mapPoint,
        outFields: "*",
      };

      const locatorUrl =
        "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

      const address = await locator.locationToAddress(locatorUrl, params);

      try {
        const city = address.attributes.City || address.attributes.Region;
        getDemographicData(city, params.location);
      } catch (error) {
        viewElement.graphics.removeAll();
        console.log(error);
      }

    });

    async function getDemographicData(city, point) {

      const demographicData = await arcgisRest.queryDemographicData({
        studyAreas: [
          {
            geometry: {
              x: point.longitude,
              y: point.latitude,
            },
          },
        ],
        authentication: authentication,
      });

      if (!demographicData.results || demographicData.results.length === 0) {
        return;
      }

      if (
        demographicData.results[0].value.FeatureSet.length > 0 &&
        demographicData.results[0].value.FeatureSet[0].features.length > 0
      ) {
        const attributes = demographicData.results[0].value.FeatureSet[0].features[0].attributes;
        showData(city, attributes, point);
      }

    }

    async function showData(city, attributes, point) {
      if (!city || !attributes || !point) {
        return;
      }

    }
7 collapsed lines

  </script>

</body>


</html>

Set the dockOptions and visibleElements on the map’s default Popup to hide the collapse and dock buttons.

113 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    const viewElement = document.querySelector("arcgis-map");

    viewElement.addEventListener("arcgisViewClick", async (event) => {

      const params = {
        location: event.detail.mapPoint,
        outFields: "*",
      };

      const locatorUrl =
        "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

      const address = await locator.locationToAddress(locatorUrl, params);

      try {
        const city = address.attributes.City || address.attributes.Region;
        getDemographicData(city, params.location);
      } catch (error) {
        viewElement.graphics.removeAll();
        console.log(error);
      }

    });

    async function getDemographicData(city, point) {

      const demographicData = await arcgisRest.queryDemographicData({
        studyAreas: [
          {
            geometry: {
              x: point.longitude,
              y: point.latitude,
            },
          },
        ],
        authentication: authentication,
      });

      if (!demographicData.results || demographicData.results.length === 0) {
        return;
      }

      if (
        demographicData.results[0].value.FeatureSet.length > 0 &&
        demographicData.results[0].value.FeatureSet[0].features.length > 0
      ) {
        const attributes = demographicData.results[0].value.FeatureSet[0].features[0].attributes;
        showData(city, attributes, point);
      }

    }

    async function showData(city, attributes, point) {
      if (!city || !attributes || !point) {
        return;
      }

      viewElement.popup.dockOptions = {
        buttonEnabled: false,
      };
      viewElement.popup.visibleElements = {
        collapseButton: false,
      };

    }
7 collapsed lines

  </script>

</body>


</html>

Define the title and content of the Popup. In the title, enter the name of the city. In the content, display the demographics for that city.

113 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    const viewElement = document.querySelector("arcgis-map");

    viewElement.addEventListener("arcgisViewClick", async (event) => {

      const params = {
        location: event.detail.mapPoint,
        outFields: "*",
      };

      const locatorUrl =
        "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

      const address = await locator.locationToAddress(locatorUrl, params);

      try {
        const city = address.attributes.City || address.attributes.Region;
        getDemographicData(city, params.location);
      } catch (error) {
        viewElement.graphics.removeAll();
        console.log(error);
      }

    });

    async function getDemographicData(city, point) {

      const demographicData = await arcgisRest.queryDemographicData({
        studyAreas: [
          {
            geometry: {
              x: point.longitude,
              y: point.latitude,
            },
          },
        ],
        authentication: authentication,
      });

      if (!demographicData.results || demographicData.results.length === 0) {
        return;
      }

      if (
        demographicData.results[0].value.FeatureSet.length > 0 &&
        demographicData.results[0].value.FeatureSet[0].features.length > 0
      ) {
        const attributes = demographicData.results[0].value.FeatureSet[0].features[0].attributes;
        showData(city, attributes, point);
      }

    }

    async function showData(city, attributes, point) {
      if (!city || !attributes || !point) {
        return;
      }

      viewElement.popup.dockOptions = {
        buttonEnabled: false,
      };
      viewElement.popup.visibleElements = {
        collapseButton: false,
      };

      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}`;

    }
7 collapsed lines

  </script>

</body>


</html>

Open the popup with the title and content displayed at the given point.

113 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    const viewElement = document.querySelector("arcgis-map");

    viewElement.addEventListener("arcgisViewClick", async (event) => {

      const params = {
        location: event.detail.mapPoint,
        outFields: "*",
      };

      const locatorUrl =
        "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

      const address = await locator.locationToAddress(locatorUrl, params);

      try {
        const city = address.attributes.City || address.attributes.Region;
        getDemographicData(city, params.location);
      } catch (error) {
        viewElement.graphics.removeAll();
        console.log(error);
      }

    });

    async function getDemographicData(city, point) {

      const demographicData = await arcgisRest.queryDemographicData({
        studyAreas: [
          {
            geometry: {
              x: point.longitude,
              y: point.latitude,
            },
          },
        ],
        authentication: authentication,
      });

      if (!demographicData.results || demographicData.results.length === 0) {
        return;
      }

      if (
        demographicData.results[0].value.FeatureSet.length > 0 &&
        demographicData.results[0].value.FeatureSet[0].features.length > 0
      ) {
        const attributes = demographicData.results[0].value.FeatureSet[0].features[0].attributes;
        showData(city, attributes, point);
      }

    }

    async function showData(city, attributes, point) {
      if (!city || !attributes || !point) {
        return;
      }

      viewElement.popup.dockOptions = {
        buttonEnabled: false,
      };
      viewElement.popup.visibleElements = {
        collapseButton: false,
      };

      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}`;

      viewElement.openPopup({
        location: point,
        title: title,
        content: content,
      });

    }
7 collapsed lines

  </script>

</body>


</html>

Next, display a buffer around the map point where we get the demographics so the user knows what is included in the query. Create a one-mile buffer graphic using the geodesicBufferOperator and add it to the map.

134 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    const viewElement = document.querySelector("arcgis-map");

    viewElement.addEventListener("arcgisViewClick", async (event) => {

      const params = {
        location: event.detail.mapPoint,
        outFields: "*",
      };

      const locatorUrl =
        "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

      const address = await locator.locationToAddress(locatorUrl, params);

      try {
        const city = address.attributes.City || address.attributes.Region;
        getDemographicData(city, params.location);
      } catch (error) {
        viewElement.graphics.removeAll();
        console.log(error);
      }

    });

    async function getDemographicData(city, point) {

      const demographicData = await arcgisRest.queryDemographicData({
        studyAreas: [
          {
            geometry: {
              x: point.longitude,
              y: point.latitude,
            },
          },
        ],
        authentication: authentication,
      });

      if (!demographicData.results || demographicData.results.length === 0) {
        return;
      }

      if (
        demographicData.results[0].value.FeatureSet.length > 0 &&
        demographicData.results[0].value.FeatureSet[0].features.length > 0
      ) {
        const attributes = demographicData.results[0].value.FeatureSet[0].features[0].attributes;
        showData(city, attributes, point);
      }

    }

    async function showData(city, attributes, point) {
      if (!city || !attributes || !point) {
        return;
      }

      viewElement.popup.dockOptions = {
        buttonEnabled: false,
      };
      viewElement.popup.visibleElements = {
        collapseButton: false,
      };

      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}`;

      viewElement.openPopup({
        location: point,
        title: title,
        content: content,
      });

      await geodesicBufferOperator.load();

      const buffer = geodesicBufferOperator.execute(point, 1, {
        unit: "miles",
      });

      const bufferGraphic = new Graphic({
        geometry: buffer,
        symbol: new SimpleFillSymbol({
          color: [50, 50, 50, 0.1],
          outline: {
            color: [0, 0, 0, 0.25],
            width: 0.5,
          },
        }),
      });

      viewElement.graphics.removeAll();
      viewElement.graphics.add(bufferGraphic);
9 collapsed lines

    }

  </script>

</body>


</html>

To give users an idea of how the app works, show the popup on the app’s initial load. Once the map component is ready, call getDemographicData() for the center of the view.

Just above the arcgisViewClick event listener, wait for the map to be ready, then call the getDemographicData() function.

63 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Get demographic data</title>

  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- Load ArcGIS REST JS libraries from https://unpkg.com -->
  <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
  <script src="https://unpkg.com/@esri/arcgis-rest-demographics@4/dist/bundled/demographics.umd.js"></script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

</head>


<body>

  <arcgis-map basemap="arcgis/navigation" center="9.1900, 45.4642" zoom="8">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-search all-placeholder="Get demographic data" popup-disabled slot="top-right"></arcgis-search>

  </arcgis-map>

  <script type="module">
    const [geodesicBufferOperator, Graphic, locator, SimpleFillSymbol] = await $arcgis.import([
      "@arcgis/core/geometry/operators/geodesicBufferOperator.js",
      "@arcgis/core/Graphic.js",
      "@arcgis/core/rest/locator.js",
      "@arcgis/core/symbols/SimpleFillSymbol.js",
    ]);


    const authentication = arcgisRest.ApiKeyManager.fromKey(esriConfig.apiKey);

    const arcgisSearch = document.querySelector("arcgis-search");

    arcgisSearch.addEventListener("arcgisSelectResult", async (event) => {
      if (!event.detail.result) {
        return;
      }
      getDemographicData(event.detail.result.name, event.detail.result.feature.geometry);
    });

    const viewElement = document.querySelector("arcgis-map");

    await viewElement.viewOnReady();
    getDemographicData("Milan", viewElement.center);
100 collapsed lines

    viewElement.addEventListener("arcgisViewClick", async (event) => {

      const params = {
        location: event.detail.mapPoint,
        outFields: "*",
      };

      const locatorUrl =
        "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

      const address = await locator.locationToAddress(locatorUrl, params);

      try {
        const city = address.attributes.City || address.attributes.Region;
        getDemographicData(city, params.location);
      } catch (error) {
        viewElement.graphics.removeAll();
        console.log(error);
      }

    });

    async function getDemographicData(city, point) {

      const demographicData = await arcgisRest.queryDemographicData({
        studyAreas: [
          {
            geometry: {
              x: point.longitude,
              y: point.latitude,
            },
          },
        ],
        authentication: authentication,
      });

      if (!demographicData.results || demographicData.results.length === 0) {
        return;
      }

      if (
        demographicData.results[0].value.FeatureSet.length > 0 &&
        demographicData.results[0].value.FeatureSet[0].features.length > 0
      ) {
        const attributes = demographicData.results[0].value.FeatureSet[0].features[0].attributes;
        showData(city, attributes, point);
      }

    }

    async function showData(city, attributes, point) {
      if (!city || !attributes || !point) {
        return;
      }

      viewElement.popup.dockOptions = {
        buttonEnabled: false,
      };
      viewElement.popup.visibleElements = {
        collapseButton: false,
      };

      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}`;

      viewElement.openPopup({
        location: point,
        title: title,
        content: content,
      });

      await geodesicBufferOperator.load();

      const buffer = geodesicBufferOperator.execute(point, 1, {
        unit: "miles",
      });

      const bufferGraphic = new Graphic({
        geometry: buffer,
        symbol: new SimpleFillSymbol({
          color: [50, 50, 50, 0.1],
          outline: {
            color: [0, 0, 0, 0.25],
            width: 0.5,
          },
        }),
      });

      viewElement.graphics.removeAll();
      viewElement.graphics.add(bufferGraphic);

    }

  </script>

</body>


</html>

Run the App

In CodePen, run your code to display the map.

Click on the map or perform a search to get the demographics for a given city.

What’s next?

Learn how to use additional SDK features and ArcGIS services in these tutorials: