Print field value in an alert box

nabsabt · ‎05-04-2021

Hi! I'm kind of new to esri API, and I need to resolve a task. My job is to print out AGE_10_14 field values in an alert, where STATE_NAME = 'California'. I could not find any documentation, neither post, which could give me a guide. I accept any help gratefully! My code is:

require([

"esri/config",

"esri/Map",

"esri/views/MapView",

"esri/layers/FeatureLayer",

"esri/renderers/ClassBreaksRenderer",

"esri/symbols/SimpleFillSymbol",

"dojo/_base/Color",

"esri/Graphic"

], function(esriConfig,Map, MapView, FeatureLayer, Extent ) {

const map = new Map({

basemap: "arcgis-topographic"

});

const populationRenderer = {

type: "simple",

symbol: {

color: "#BA55D3",

type: "simple-fill",

style: "solid"

}

const view = new MapView({

container: "viewDiv",

map: map,

center: [-105.80543,38.02700],

zoom: 5

});

USACounties = new FeatureLayer({

url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Counties_Generalized/FeatureSe...",

definitionExpression: "STATE_NAME = 'California'",

renderer: populationRenderer

});

map.add(USACounties, 0);

});

KenBuja · ‎05-04-2021

Here's an example of getting an alert when clicking on a feature

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Clicking on a layer with JS API 4</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/4.19/"></script>
  <script>
    var map;
    require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"],
      function (Map, MapView, FeatureLayer) {
        const map = new Map({
          basemap: "arcgis-topographic"
        });

        const populationRenderer = {
          type: "simple",
          symbol: {
            color: "#BA55D3",
            type: "simple-fill",
            style: "solid"
          }
        }

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-105.80543, 38.02700],
          zoom: 5
        });

        USACounties = new FeatureLayer({
          url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Counties_Generalized/FeatureServer/0",
          definitionExpression: "STATE_NAME = 'California'",
          renderer: populationRenderer,
          outFields: ['*']
        });

        map.add(USACounties, 0);

        view.on('click', (event) => {
          view.hitTest(event)
            .then((response) => {
              console.log(response.results[0].graphic.attributes['AGE_10_14']);
            });
        });
      });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

View solution in original post

KenBuja · ‎05-04-2021

When do you want it to pop up the alert? When the user clicks on the map? When the map is ready to use?

nabsabt · ‎05-04-2021

When the map (feature layer) is loaded, there's not any restriction to it.

KenBuja · ‎05-04-2021

This is a good blog that talks about when items are ready: https://odoe.net/blog/when-are-layers-done

nabsabt · ‎05-04-2021

Yes, but my issue is that I don't know, how to print field values to anywhere (alert, console, or just put them in an array, doesn't matter) =\ I could not find any simple solution for that, but probably there is.

KenBuja · ‎05-04-2021

Here's an example of getting an alert when clicking on a feature

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Clicking on a layer with JS API 4</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/4.19/"></script>
  <script>
    var map;
    require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"],
      function (Map, MapView, FeatureLayer) {
        const map = new Map({
          basemap: "arcgis-topographic"
        });

        const populationRenderer = {
          type: "simple",
          symbol: {
            color: "#BA55D3",
            type: "simple-fill",
            style: "solid"
          }
        }

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-105.80543, 38.02700],
          zoom: 5
        });

        USACounties = new FeatureLayer({
          url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/USA_Counties_Generalized/FeatureServer/0",
          definitionExpression: "STATE_NAME = 'California'",
          renderer: populationRenderer,
          outFields: ['*']
        });

        map.add(USACounties, 0);

        view.on('click', (event) => {
          view.hitTest(event)
            .then((response) => {
              console.log(response.results[0].graphic.attributes['AGE_10_14']);
            });
        });
      });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>