Get demographic data

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

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 .

Import ArcGIS REST JS

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

Add line.Add line.Add line.
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .esri-view .esri-popup__button.esri-popup__button--dock {
            display: none;
        }
    </style>


    <!-- require 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>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.19/"></script>


    <script>

        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",

            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "esri/widgets/Search",
            "esri/core/watchUtils"

        ],
        function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, watchUtils) {

            const authentication = new arcgisRest.ApiKey({
                key: "YOUR-API-KEY"
            });

            esriConfig.apiKey = "YOUR-API-KEY";

            const map = new Map({
                basemap: "arcgis-navigation"
            });

            const view = new MapView({
                map: map,
                center: [9.1900, 45.4642], // Milan, Italy
                zoom: 4,
                container: "viewDiv",
            });

            const search = new Search({
                view: view
            });
            view.ui.add(search, "top-right");

            view.when(() => {
                watchUtils.once(search, "activeSource", (loaded) => {
                    if (loaded) {
                        search.popupEnabled = false;
                        search.activeSource.placeholder = "Find facts for cities or places";
                    }
                    getDemographicData("Milan", view.center)
                });
            });

            search.on("select-result", (event) => {
                if (!event.result) {
                    return;
                }
                getDemographicData(event.result.name, event.result.feature.geometry);
            });

            view.on("click", e => {

                const params = {
                    location: e.mapPoint,
                    outFields: "*"
                };
                search.activeSource.locator.locationToAddress(params)

                    .then(function (response) { // Show the address found
                        const city = response.attributes.City || response.attributes.Region;
                        getDemographicData(city, point);
                    }, function (err) { // Show no address found
                        view.graphics.removeAll();
                        console.log("No address found.");
                    });

            });

            function getDemographicData(city, point) {

                // Request demographic data
                arcgisRest.queryDemographicData({
                    studyAreas: [{
                        "geometry": {
                            "x": point.longitude,
                            "y": point.latitude
                        }
                    }],
                    authentication: authentication
                })

                .then((response) => {
                    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;
                        showData(city, attributes, point);
                    }
                    else {
                        console.log("No data found.");
                    }
                });

            }

            function showData(city, attributes, point) {
                if (!city || !attributes || !point) {
                    return;
                }
                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}`;

                view.popup.open({
                    location: point,
                    title: title,
                    content: content
                });

                const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
                const graphicBuffer = new Graphic({
                    geometry: buffer,
                    symbol: {
                        type: "simple-fill",
                        color: [50, 50, 50, 0.1],
                        outline: {
                            color: [0, 0, 0, 0.25],
                            width: .5
                        }
                    }
                })
                view.graphics.removeAll();
                view.graphics.add(graphicBuffer);

            }

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

Set the API key

To access ArcGIS services, you need an API key.

Go to your dashboard to get an API key.
In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

You will also need to use your API key to access the ArcGIS REST JS.

Add line.Add line.Add line.Change line
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .esri-view .esri-popup__button.esri-popup__button--dock {
            display: none;
        }
    </style>


    <!-- require 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>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.19/"></script>


    <script>

        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",

            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "esri/widgets/Search",
            "esri/core/watchUtils"

        ],
        function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, watchUtils) {

            const authentication = new arcgisRest.ApiKey({
                key: "YOUR-API-KEY"
            });

            esriConfig.apiKey = "YOUR-API-KEY";

            const map = new Map({
                basemap: "arcgis-navigation"
            });

            const view = new MapView({
                map: map,
                center: [9.1900, 45.4642], // Milan, Italy
                zoom: 4,
                container: "viewDiv",
            });

            const search = new Search({
                view: view
            });
            view.ui.add(search, "top-right");

            view.when(() => {
                watchUtils.once(search, "activeSource", (loaded) => {
                    if (loaded) {
                        search.popupEnabled = false;
                        search.activeSource.placeholder = "Find facts for cities or places";
                    }
                    getDemographicData("Milan", view.center)
                });
            });

            search.on("select-result", (event) => {
                if (!event.result) {
                    return;
                }
                getDemographicData(event.result.name, event.result.feature.geometry);
            });

            view.on("click", e => {

                const params = {
                    location: e.mapPoint,
                    outFields: "*"
                };
                search.activeSource.locator.locationToAddress(params)

                    .then(function (response) { // Show the address found
                        const city = response.attributes.City || response.attributes.Region;
                        getDemographicData(city, point);
                    }, function (err) { // Show no address found
                        view.graphics.removeAll();
                        console.log("No address found.");
                    });

            });

            function getDemographicData(city, point) {

                // Request demographic data
                arcgisRest.queryDemographicData({
                    studyAreas: [{
                        "geometry": {
                            "x": point.longitude,
                            "y": point.latitude
                        }
                    }],
                    authentication: authentication
                })

                .then((response) => {
                    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;
                        showData(city, attributes, point);
                    }
                    else {
                        console.log("No data found.");
                    }
                });

            }

            function showData(city, attributes, point) {
                if (!city || !attributes || !point) {
                    return;
                }
                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}`;

                view.popup.open({
                    location: point,
                    title: title,
                    content: content
                });

                const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
                const graphicBuffer = new Graphic({
                    geometry: buffer,
                    symbol: {
                        type: "simple-fill",
                        color: [50, 50, 50, 0.1],
                        outline: {
                            color: [0, 0, 0, 0.25],
                            width: .5
                        }
                    }
                })
                view.graphics.removeAll();
                view.graphics.add(graphicBuffer);

            }

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

Add modules

In the require statement, add the Graphic, geometryEngine, Search, and watchUtils modules.

The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.

Add line.Add line.Add line.Add line.Change line
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .esri-view .esri-popup__button.esri-popup__button--dock {
            display: none;
        }
    </style>


    <!-- require 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>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.19/"></script>


    <script>

        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",

            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "esri/widgets/Search",
            "esri/core/watchUtils"

        ],
        function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, watchUtils) {

            const authentication = new arcgisRest.ApiKey({
                key: "YOUR-API-KEY"
            });

            esriConfig.apiKey = "YOUR-API-KEY";

            const map = new Map({
                basemap: "arcgis-navigation"
            });

            const view = new MapView({
                map: map,
                center: [9.1900, 45.4642], // Milan, Italy
                zoom: 4,
                container: "viewDiv",
            });

            const search = new Search({
                view: view
            });
            view.ui.add(search, "top-right");

            view.when(() => {
                watchUtils.once(search, "activeSource", (loaded) => {
                    if (loaded) {
                        search.popupEnabled = false;
                        search.activeSource.placeholder = "Find facts for cities or places";
                    }
                    getDemographicData("Milan", view.center)
                });
            });

            search.on("select-result", (event) => {
                if (!event.result) {
                    return;
                }
                getDemographicData(event.result.name, event.result.feature.geometry);
            });

            view.on("click", e => {

                const params = {
                    location: e.mapPoint,
                    outFields: "*"
                };
                search.activeSource.locator.locationToAddress(params)

                    .then(function (response) { // Show the address found
                        const city = response.attributes.City || response.attributes.Region;
                        getDemographicData(city, point);
                    }, function (err) { // Show no address found
                        view.graphics.removeAll();
                        console.log("No address found.");
                    });

            });

            function getDemographicData(city, point) {

                // Request demographic data
                arcgisRest.queryDemographicData({
                    studyAreas: [{
                        "geometry": {
                            "x": point.longitude,
                            "y": point.latitude
                        }
                    }],
                    authentication: authentication
                })

                .then((response) => {
                    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;
                        showData(city, attributes, point);
                    }
                    else {
                        console.log("No data found.");
                    }
                });

            }

            function showData(city, attributes, point) {
                if (!city || !attributes || !point) {
                    return;
                }
                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}`;

                view.popup.open({
                    location: point,
                    title: title,
                    content: content
                });

                const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
                const graphicBuffer = new Graphic({
                    geometry: buffer,
                    symbol: {
                        type: "simple-fill",
                        color: [50, 50, 50, 0.1],
                        outline: {
                            color: [0, 0, 0, 0.25],
                            width: .5
                        }
                    }
                })
                view.graphics.removeAll();
                view.graphics.add(graphicBuffer);

            }

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

Update the map

A streets basemap layer is typically used in geocoding applications. Update the basemap property 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.

Change line
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .esri-view .esri-popup__button.esri-popup__button--dock {
            display: none;
        }
    </style>


    <!-- require 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>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.19/"></script>


    <script>

        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",

            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "esri/widgets/Search",
            "esri/core/watchUtils"

        ],
        function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, watchUtils) {

            const authentication = new arcgisRest.ApiKey({
                key: "YOUR-API-KEY"
            });

            esriConfig.apiKey = "YOUR-API-KEY";

            const map = new Map({
                basemap: "arcgis-navigation"
            });

            const view = new MapView({
                map: map,
                center: [9.1900, 45.4642], // Milan, Italy
                zoom: 4,
                container: "viewDiv",
            });

            const search = new Search({
                view: view
            });
            view.ui.add(search, "top-right");

            view.when(() => {
                watchUtils.once(search, "activeSource", (loaded) => {
                    if (loaded) {
                        search.popupEnabled = false;
                        search.activeSource.placeholder = "Find facts for cities or places";
                    }
                    getDemographicData("Milan", view.center)
                });
            });

            search.on("select-result", (event) => {
                if (!event.result) {
                    return;
                }
                getDemographicData(event.result.name, event.result.feature.geometry);
            });

            view.on("click", e => {

                const params = {
                    location: e.mapPoint,
                    outFields: "*"
                };
                search.activeSource.locator.locationToAddress(params)

                    .then(function (response) { // Show the address found
                        const city = response.attributes.City || response.attributes.Region;
                        getDemographicData(city, point);
                    }, function (err) { // Show no address found
                        view.graphics.removeAll();
                        console.log("No address found.");
                    });

            });

            function getDemographicData(city, point) {

                // Request demographic data
                arcgisRest.queryDemographicData({
                    studyAreas: [{
                        "geometry": {
                            "x": point.longitude,
                            "y": point.latitude
                        }
                    }],
                    authentication: authentication
                })

                .then((response) => {
                    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;
                        showData(city, attributes, point);
                    }
                    else {
                        console.log("No data found.");
                    }
                });

            }

            function showData(city, attributes, point) {
                if (!city || !attributes || !point) {
                    return;
                }
                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}`;

                view.popup.open({
                    location: point,
                    title: title,
                    content: content
                });

                const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
                const graphicBuffer = new Graphic({
                    geometry: buffer,
                    symbol: {
                        type: "simple-fill",
                        color: [50, 50, 50, 0.1],
                        outline: {
                            color: [0, 0, 0, 0.25],
                            width: .5
                        }
                    }
                })
                view.graphics.removeAll();
                view.graphics.add(graphicBuffer);

            }

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

Update the center property to [9.1900, 45.4642], and set the zoom property to 4.

Change lineChange line
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .esri-view .esri-popup__button.esri-popup__button--dock {
            display: none;
        }
    </style>


    <!-- require 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>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.19/"></script>


    <script>

        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",

            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "esri/widgets/Search",
            "esri/core/watchUtils"

        ],
        function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, watchUtils) {

            const authentication = new arcgisRest.ApiKey({
                key: "YOUR-API-KEY"
            });

            esriConfig.apiKey = "YOUR-API-KEY";

            const map = new Map({
                basemap: "arcgis-navigation"
            });

            const view = new MapView({
                map: map,
                center: [9.1900, 45.4642], // Milan, Italy
                zoom: 4,
                container: "viewDiv",
            });

            const search = new Search({
                view: view
            });
            view.ui.add(search, "top-right");

            view.when(() => {
                watchUtils.once(search, "activeSource", (loaded) => {
                    if (loaded) {
                        search.popupEnabled = false;
                        search.activeSource.placeholder = "Find facts for cities or places";
                    }
                    getDemographicData("Milan", view.center)
                });
            });

            search.on("select-result", (event) => {
                if (!event.result) {
                    return;
                }
                getDemographicData(event.result.name, event.result.feature.geometry);
            });

            view.on("click", e => {

                const params = {
                    location: e.mapPoint,
                    outFields: "*"
                };
                search.activeSource.locator.locationToAddress(params)

                    .then(function (response) { // Show the address found
                        const city = response.attributes.City || response.attributes.Region;
                        getDemographicData(city, point);
                    }, function (err) { // Show no address found
                        view.graphics.removeAll();
                        console.log("No address found.");
                    });

            });

            function getDemographicData(city, point) {

                // Request demographic data
                arcgisRest.queryDemographicData({
                    studyAreas: [{
                        "geometry": {
                            "x": point.longitude,
                            "y": point.latitude
                        }
                    }],
                    authentication: authentication
                })

                .then((response) => {
                    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;
                        showData(city, attributes, point);
                    }
                    else {
                        console.log("No data found.");
                    }
                });

            }

            function showData(city, attributes, point) {
                if (!city || !attributes || !point) {
                    return;
                }
                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}`;

                view.popup.open({
                    location: point,
                    title: title,
                    content: content
                });

                const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
                const graphicBuffer = new Graphic({
                    geometry: buffer,
                    symbol: {
                        type: "simple-fill",
                        color: [50, 50, 50, 0.1],
                        outline: {
                            color: [0, 0, 0, 0.25],
                            width: .5
                        }
                    }
                })
                view.graphics.removeAll();
                view.graphics.add(graphicBuffer);

            }

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

Next, we are going to add the Search widget so that the user can search for locations where they want to see the demographics.

Create the Search widget and define the view. Then, add the widget to the top right.

Add line.Add line.Add line.Add line.
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .esri-view .esri-popup__button.esri-popup__button--dock {
            display: none;
        }
    </style>


    <!-- require 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>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.19/"></script>


    <script>

        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",

            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "esri/widgets/Search",
            "esri/core/watchUtils"

        ],
        function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, watchUtils) {

            const authentication = new arcgisRest.ApiKey({
                key: "YOUR-API-KEY"
            });

            esriConfig.apiKey = "YOUR-API-KEY";

            const map = new Map({
                basemap: "arcgis-navigation"
            });

            const view = new MapView({
                map: map,
                center: [9.1900, 45.4642], // Milan, Italy
                zoom: 4,
                container: "viewDiv",
            });

            const search = new Search({
                view: view
            });
            view.ui.add(search, "top-right");

            view.when(() => {
                watchUtils.once(search, "activeSource", (loaded) => {
                    if (loaded) {
                        search.popupEnabled = false;
                        search.activeSource.placeholder = "Find facts for cities or places";
                    }
                    getDemographicData("Milan", view.center)
                });
            });

            search.on("select-result", (event) => {
                if (!event.result) {
                    return;
                }
                getDemographicData(event.result.name, event.result.feature.geometry);
            });

            view.on("click", e => {

                const params = {
                    location: e.mapPoint,
                    outFields: "*"
                };
                search.activeSource.locator.locationToAddress(params)

                    .then(function (response) { // Show the address found
                        const city = response.attributes.City || response.attributes.Region;
                        getDemographicData(city, point);
                    }, function (err) { // Show no address found
                        view.graphics.removeAll();
                        console.log("No address found.");
                    });

            });

            function getDemographicData(city, point) {

                // Request demographic data
                arcgisRest.queryDemographicData({
                    studyAreas: [{
                        "geometry": {
                            "x": point.longitude,
                            "y": point.latitude
                        }
                    }],
                    authentication: authentication
                })

                .then((response) => {
                    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;
                        showData(city, attributes, point);
                    }
                    else {
                        console.log("No data found.");
                    }
                });

            }

            function showData(city, attributes, point) {
                if (!city || !attributes || !point) {
                    return;
                }
                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}`;

                view.popup.open({
                    location: point,
                    title: title,
                    content: content
                });

                const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
                const graphicBuffer = new Graphic({
                    geometry: buffer,
                    symbol: {
                        type: "simple-fill",
                        color: [50, 50, 50, 0.1],
                        outline: {
                            color: [0, 0, 0, 0.25],
                            width: .5
                        }
                    }
                })
                view.graphics.removeAll();
                view.graphics.add(graphicBuffer);

            }

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

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

Add line.Add line.Add line.
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .esri-view .esri-popup__button.esri-popup__button--dock {
            display: none;
        }
    </style>


    <!-- require 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>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.19/"></script>


    <script>

        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",

            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "esri/widgets/Search",
            "esri/core/watchUtils"

        ],
        function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, watchUtils) {

            const authentication = new arcgisRest.ApiKey({
                key: "YOUR-API-KEY"
            });

            esriConfig.apiKey = "YOUR-API-KEY";

            const map = new Map({
                basemap: "arcgis-navigation"
            });

            const view = new MapView({
                map: map,
                center: [9.1900, 45.4642], // Milan, Italy
                zoom: 4,
                container: "viewDiv",
            });

            const search = new Search({
                view: view
            });
            view.ui.add(search, "top-right");

            view.when(() => {
                watchUtils.once(search, "activeSource", (loaded) => {
                    if (loaded) {
                        search.popupEnabled = false;
                        search.activeSource.placeholder = "Find facts for cities or places";
                    }
                    getDemographicData("Milan", view.center)
                });
            });

            search.on("select-result", (event) => {
                if (!event.result) {
                    return;
                }
                getDemographicData(event.result.name, event.result.feature.geometry);
            });

            view.on("click", e => {

                const params = {
                    location: e.mapPoint,
                    outFields: "*"
                };
                search.activeSource.locator.locationToAddress(params)

                    .then(function (response) { // Show the address found
                        const city = response.attributes.City || response.attributes.Region;
                        getDemographicData(city, point);
                    }, function (err) { // Show no address found
                        view.graphics.removeAll();
                        console.log("No address found.");
                    });

            });

            function getDemographicData(city, point) {

                // Request demographic data
                arcgisRest.queryDemographicData({
                    studyAreas: [{
                        "geometry": {
                            "x": point.longitude,
                            "y": point.latitude
                        }
                    }],
                    authentication: authentication
                })

                .then((response) => {
                    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;
                        showData(city, attributes, point);
                    }
                    else {
                        console.log("No data found.");
                    }
                });

            }

            function showData(city, attributes, point) {
                if (!city || !attributes || !point) {
                    return;
                }
                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}`;

                view.popup.open({
                    location: point,
                    title: title,
                    content: content
                });

                const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
                const graphicBuffer = new Graphic({
                    geometry: buffer,
                    symbol: {
                        type: "simple-fill",
                        color: [50, 50, 50, 0.1],
                        outline: {
                            color: [0, 0, 0, 0.25],
                            width: .5
                        }
                    }
                })
                view.graphics.removeAll();
                view.graphics.add(graphicBuffer);

            }

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

Add click event on the view

We also want to allow the user to search for demographics by clicking anywhere in the map. To do this, we will watch for a click event on the MapView.

Use the click event to watch for when the MapView is clicked.

Add line.Add line.Add line.
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .esri-view .esri-popup__button.esri-popup__button--dock {
            display: none;
        }
    </style>


    <!-- require 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>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.19/"></script>


    <script>

        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",

            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "esri/widgets/Search",
            "esri/core/watchUtils"

        ],
        function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, watchUtils) {

            const authentication = new arcgisRest.ApiKey({
                key: "YOUR-API-KEY"
            });

            esriConfig.apiKey = "YOUR-API-KEY";

            const map = new Map({
                basemap: "arcgis-navigation"
            });

            const view = new MapView({
                map: map,
                center: [9.1900, 45.4642], // Milan, Italy
                zoom: 4,
                container: "viewDiv",
            });

            const search = new Search({
                view: view
            });
            view.ui.add(search, "top-right");

            view.when(() => {
                watchUtils.once(search, "activeSource", (loaded) => {
                    if (loaded) {
                        search.popupEnabled = false;
                        search.activeSource.placeholder = "Find facts for cities or places";
                    }
                    getDemographicData("Milan", view.center)
                });
            });

            search.on("select-result", (event) => {
                if (!event.result) {
                    return;
                }
                getDemographicData(event.result.name, event.result.feature.geometry);
            });

            view.on("click", e => {

                const params = {
                    location: e.mapPoint,
                    outFields: "*"
                };
                search.activeSource.locator.locationToAddress(params)

                    .then(function (response) { // Show the address found
                        const city = response.attributes.City || response.attributes.Region;
                        getDemographicData(city, point);
                    }, function (err) { // Show no address found
                        view.graphics.removeAll();
                        console.log("No address found.");
                    });

            });

            function getDemographicData(city, point) {

                // Request demographic data
                arcgisRest.queryDemographicData({
                    studyAreas: [{
                        "geometry": {
                            "x": point.longitude,
                            "y": point.latitude
                        }
                    }],
                    authentication: authentication
                })

                .then((response) => {
                    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;
                        showData(city, attributes, point);
                    }
                    else {
                        console.log("No data found.");
                    }
                });

            }

            function showData(city, attributes, point) {
                if (!city || !attributes || !point) {
                    return;
                }
                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}`;

                view.popup.open({
                    location: point,
                    title: title,
                    content: content
                });

                const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
                const graphicBuffer = new Graphic({
                    geometry: buffer,
                    symbol: {
                        type: "simple-fill",
                        color: [50, 50, 50, 0.1],
                        outline: {
                            color: [0, 0, 0, 0.25],
                            width: .5
                        }
                    }
                })
                view.graphics.removeAll();
                view.graphics.add(graphicBuffer);

            }

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

When the event is returned, use the resulting mapPoint to set your parameters, then execute the locationToAddress() method on the Locator task. This will return the city that we want to find the demographics for.

Add line.Add line.Add line.Add line.Add line.
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .esri-view .esri-popup__button.esri-popup__button--dock {
            display: none;
        }
    </style>


    <!-- require 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>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.19/"></script>


    <script>

        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",

            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "esri/widgets/Search",
            "esri/core/watchUtils"

        ],
        function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, watchUtils) {

            const authentication = new arcgisRest.ApiKey({
                key: "YOUR-API-KEY"
            });

            esriConfig.apiKey = "YOUR-API-KEY";

            const map = new Map({
                basemap: "arcgis-navigation"
            });

            const view = new MapView({
                map: map,
                center: [9.1900, 45.4642], // Milan, Italy
                zoom: 4,
                container: "viewDiv",
            });

            const search = new Search({
                view: view
            });
            view.ui.add(search, "top-right");

            view.when(() => {
                watchUtils.once(search, "activeSource", (loaded) => {
                    if (loaded) {
                        search.popupEnabled = false;
                        search.activeSource.placeholder = "Find facts for cities or places";
                    }
                    getDemographicData("Milan", view.center)
                });
            });

            search.on("select-result", (event) => {
                if (!event.result) {
                    return;
                }
                getDemographicData(event.result.name, event.result.feature.geometry);
            });

            view.on("click", e => {

                const params = {
                    location: e.mapPoint,
                    outFields: "*"
                };
                search.activeSource.locator.locationToAddress(params)

                    .then(function (response) { // Show the address found
                        const city = response.attributes.City || response.attributes.Region;
                        getDemographicData(city, point);
                    }, function (err) { // Show no address found
                        view.graphics.removeAll();
                        console.log("No address found.");
                    });

            });

            function getDemographicData(city, point) {

                // Request demographic data
                arcgisRest.queryDemographicData({
                    studyAreas: [{
                        "geometry": {
                            "x": point.longitude,
                            "y": point.latitude
                        }
                    }],
                    authentication: authentication
                })

                .then((response) => {
                    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;
                        showData(city, attributes, point);
                    }
                    else {
                        console.log("No data found.");
                    }
                });

            }

            function showData(city, attributes, point) {
                if (!city || !attributes || !point) {
                    return;
                }
                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}`;

                view.popup.open({
                    location: point,
                    title: title,
                    content: content
                });

                const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
                const graphicBuffer = new Graphic({
                    geometry: buffer,
                    symbol: {
                        type: "simple-fill",
                        color: [50, 50, 50, 0.1],
                        outline: {
                            color: [0, 0, 0, 0.25],
                            width: .5
                        }
                    }
                })
                view.graphics.removeAll();
                view.graphics.add(graphicBuffer);

            }

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

Once the locationToAddress() method has resolved, we can use the results to get the name of the city closest to the click point. We can use this city and the point that was clicked on the map to call the getDemographicData() method that is defined in the next step.

Add line.Add line.Add line.Add line.
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript Tutorials: Get demographic data</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .esri-view .esri-popup__button.esri-popup__button--dock {
            display: none;
        }
    </style>


    <!-- require 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>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.19/"></script>


    <script>

        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",

            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "esri/widgets/Search",
            "esri/core/watchUtils"

        ],
        function (esriConfig, Map, MapView, Graphic, geometryEngine, Search, watchUtils) {

            const authentication = new arcgisRest.ApiKey({
                key: "YOUR-API-KEY"
            });

            esriConfig.apiKey = "YOUR-API-KEY";

            const map = new Map({
                basemap: "arcgis-navigation"
            });

            const view = new MapView({
                map: map,
                center: [9.1900, 45.4642], // Milan, Italy
                zoom: 4,
                container: "viewDiv",
            });

            const search = new Search({
                view: view
            });
            view.ui.add(search, "top-right");

            view.when(() => {
                watchUtils.once(search, "activeSource", (loaded) => {
                    if (loaded) {
                        search.popupEnabled = false;
                        search.activeSource.placeholder = "Find facts for cities or places";
                    }
                    getDemographicData("Milan", view.center)
                });
            });

            search.on("select-result", (event) => {
                if (!event.result) {
                    return;
                }
                getDemographicData(event.result.name, event.result.feature.geometry);
            });

            view.on("click", e => {

                const params = {
                    location: e.mapPoint,
                    outFields: "*"
                };
                search.activeSource.locator.locationToAddress(params)

                    .then(function (response) { // Show the address found
                        const city = response.attributes.City || response.attributes.Region;
                        getDemographicData(city, point);
                    }, function (err) { // Show no address found
                        view.graphics.removeAll();
                        console.log("No address found.");
                    });

            });

            function getDemographicData(city, point) {

                // Request demographic data
                arcgisRest.queryDemographicData({
                    studyAreas: [{
                        "geometry": {
                            "x": point.longitude,
                            "y": point.latitude
                        }
                    }],
                    authentication: authentication
                })

                .then((response) => {
                    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;
                        showData(city, attributes, point);
                    }
                    else {
                        console.log("No data found.");
                    }
                });

            }

            function showData(city, attributes, point) {
                if (!city || !attributes || !point) {
                    return;
                }
                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}`;

                view.popup.open({
                    location: point,
                    title: title,
                    content: content
                });

                const buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
                const graphicBuffer = new Graphic({
                    geometry: buffer,
                    symbol: {
                        type: "simple-fill",
                        color: [50, 50, 50, 0.1],
                        outline: {
                            color: [0, 0, 0, 0.25],
                            width: .5
                        }
                    }
                })
                view.graphics.removeAll();
                view.graphics.add(graphicBuffer);

            }

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>