Print field value in an alert box

364
5
Jump to solution
05-04-2021 09:49 AM
nabsabt
New Contributor

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,MapMapViewFeatureLayerExtent ) {
 

  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({
    definitionExpression: "STATE_NAME = 'California'",
    renderer: populationRenderer
  });

  map.add(USACounties0);
  });
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

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

5 Replies
KenBuja
MVP Honored Contributor

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

0 Kudos
nabsabt
New Contributor

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

0 Kudos
KenBuja
MVP Honored Contributor

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

0 Kudos
nabsabt
New Contributor

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.

0 Kudos
KenBuja
MVP Honored Contributor

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>