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

  1. 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<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.21/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.21/"></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;
            view.on("click", e => {
                const params = {
                    location: e.mapPoint,
                    outFields: "*"
                    .then(function (response) { // Show the address found
                        const city = response.attributes.City || response.attributes.Region;
                    }, function (err) { // Show no address found
                        console.log("No address found.");
            function getDemographicData(city, point) {
                // Request demographic data
                    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;
                    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}`;
                    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
    </script>
</head>

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

</html>

Set the API key

To access ArcGIS services, you need an API key.

  1. Go to your dashboard to get an API key.

  2. In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

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

                                                                                                                                                                            
    Add line.Add line.Add line.Change line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <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.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></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;
                view.on("click", e => {
                    const params = {
                        location: e.mapPoint,
                        outFields: "*"
                        .then(function (response) { // Show the address found
                            const city = response.attributes.City || response.attributes.Region;
                        }, function (err) { // Show no address found
                            console.log("No address found.");
                function getDemographicData(city, point) {
                    // Request demographic data
                        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;
                        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}`;
                        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
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>

Add modules

  1. 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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <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.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></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;
                view.on("click", e => {
                    const params = {
                        location: e.mapPoint,
                        outFields: "*"
                        .then(function (response) { // Show the address found
                            const city = response.attributes.City || response.attributes.Region;
                        }, function (err) { // Show no address found
                            console.log("No address found.");
                function getDemographicData(city, point) {
                    // Request demographic data
                        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;
                        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}`;
                        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
        </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.

  1. Update the basemap property from arcgis-topographic to arcgis-navigation.

                                                                                                                                                                            
    Change line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <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.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></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;
                view.on("click", e => {
                    const params = {
                        location: e.mapPoint,
                        outFields: "*"
                        .then(function (response) { // Show the address found
                            const city = response.attributes.City || response.attributes.Region;
                        }, function (err) { // Show no address found
                            console.log("No address found.");
                function getDemographicData(city, point) {
                    // Request demographic data
                        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;
                        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}`;
                        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
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>
  2. Update the center property to [9.1900, 45.4642], and set the zoom property to 4.

                                                                                                                                                                            
    Change lineChange line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <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.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></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;
                view.on("click", e => {
                    const params = {
                        location: e.mapPoint,
                        outFields: "*"
                        .then(function (response) { // Show the address found
                            const city = response.attributes.City || response.attributes.Region;
                        }, function (err) { // Show no address found
                            console.log("No address found.");
                function getDemographicData(city, point) {
                    // Request demographic data
                        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;
                        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}`;
                        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
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>

Add the Search widget

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

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

                                                                                                                                                                            
    Add line.Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <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.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></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;
                view.on("click", e => {
                    const params = {
                        location: e.mapPoint,
                        outFields: "*"
                        .then(function (response) { // Show the address found
                            const city = response.attributes.City || response.attributes.Region;
                        }, function (err) { // Show no address found
                            console.log("No address found.");
                function getDemographicData(city, point) {
                    // Request demographic data
                        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;
                        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}`;
                        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
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>
  2. 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.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <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.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></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: "*"
                        .then(function (response) { // Show the address found
                            const city = response.attributes.City || response.attributes.Region;
                        }, function (err) { // Show no address found
                            console.log("No address found.");
                function getDemographicData(city, point) {
                    // Request demographic data
                        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;
                        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}`;
                        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
        </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.

  1. Use the click event to watch for when the MapView is clicked.
                                                                                                                                                                            
    Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <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.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></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;
                view.on("click", e => {
    
                    const params = {
                        location: e.mapPoint,
                        outFields: "*"
                        .then(function (response) { // Show the address found
                            const city = response.attributes.City || response.attributes.Region;
                        }, function (err) { // Show no address found
                            console.log("No address found.");
                });
                function getDemographicData(city, point) {
                    // Request demographic data
                        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;
                        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}`;
                        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
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>
  2. 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.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <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.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></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;
                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;
                        }, function (err) { // Show no address found
                            console.log("No address found.");
                });
                function getDemographicData(city, point) {
                    // Request demographic data
                        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;
                        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}`;
                        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
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>
  3. 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.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <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.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></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;
                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, params.location);
                        }, function (err) { // Show no address found
                            console.log("No address found.");
                        });
    
                });
                function getDemographicData(city, point) {
                    // Request demographic data
                        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;
                        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}`;
                        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
        </script>
    </head>
    
    <body>
        <div id="viewDiv"></div>
    </body>
    
    </html>

Get demographic data

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

  1. Create a function, getDemographicData(), to get the demographic data from the ArcGIS REST JS and handle the results. We will add the city and point we want to get the demographics for as the function parameters.

                                                                                                                                                                            
    Add line.Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    <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.21/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.21/"></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;
                view.on("click", e => {
                    const params = {
                        location: e.mapPoint,
                        outFields: "*"
                        .then(function (response) { // Show the address found
                            const city = response.attributes.City || response.attributes.Region;
                        }, function (err) { // Show no address found
                            console.log("No address found.");
                function getDemographicData(city, point) {
    
                    // Request demographic data
                        studyAreas: [{
                            "geometry": {
                                "x": point.longitude,
                                "y": point.latitude
                        authentication: authentication