Capture attribute values from a WebMap

LA · ‎11-08-2017

I would like to capture attribute values from a WebMap into a variable, similar to #How can I capture attribute values in a variable? but in my case I am using a WebMap, and neither solutions from the tagged post seem to work (infoWindow is not available and event.graphic seems to be undefined). It also seems that there are no layers associated with the WebMap, so I don't know how to access the data on the layers.

I really appreciate any any help.

Thanks.

require([
 "esri/views/MapView",
 "esri/WebMap",
 "dojo/domReady!"
 ], function(MapView, WebMap) {

 var webmap = new WebMap({
 portalItem: { 
 id: "7faf8d05df114f8082411414382c69d3"
 }
 });

var view = new MapView({
 map: webmap,
 container: "viewMap"
 });
console.log("Num WebMap Layers: "+webmap.layers.length);

view.on("click", function(event) {


console.log(event.graphic);
 });
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎11-08-2017

L A,

Things are very different in 4.x:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Load a basic WebMap - 4.5</title>

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

  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">

  <script src="https://js.arcgis.com/4.5/"></script>

  <script>
    require([
      "esri/views/MapView",
      "esri/WebMap",
      "dojo/domReady!"
    ], function(
      MapView, WebMap
    ) {

      /************************************************************
       * Creates a new WebMap instance. A WebMap must reference
       * a PortalItem ID that represents a WebMap saved to
       * arcgis.com or an on-premise portal.
       *
       * To load a WebMap from an on-premise portal, set the portal
       * url with esriConfig.portalUrl.
       ************************************************************/
      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "7faf8d05df114f8082411414382c69d3"
        }
      });

      /************************************************************
       * Set the WebMap instance to the map property in a MapView.
       ************************************************************/
      var view = new MapView({
        map: webmap,
        container: "viewDiv"
      });
      
      view.on("click", function(event) {
        console.log(event);
        view.hitTest(event).then(function(evt){
          if(evt.results){
            evt.results.forEach(function(result){
              console.info(result.graphic.attributes);
            });
          }
        });
      });
    });
  </script>
</head>

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

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎11-08-2017

L A,

Things are very different in 4.x:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Load a basic WebMap - 4.5</title>

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

  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">

  <script src="https://js.arcgis.com/4.5/"></script>

  <script>
    require([
      "esri/views/MapView",
      "esri/WebMap",
      "dojo/domReady!"
    ], function(
      MapView, WebMap
    ) {

      /************************************************************
       * Creates a new WebMap instance. A WebMap must reference
       * a PortalItem ID that represents a WebMap saved to
       * arcgis.com or an on-premise portal.
       *
       * To load a WebMap from an on-premise portal, set the portal
       * url with esriConfig.portalUrl.
       ************************************************************/
      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "7faf8d05df114f8082411414382c69d3"
        }
      });

      /************************************************************
       * Set the WebMap instance to the map property in a MapView.
       ************************************************************/
      var view = new MapView({
        map: webmap,
        container: "viewDiv"
      });
      
      view.on("click", function(event) {
        console.log(event);
        view.hitTest(event).then(function(evt){
          if(evt.results){
            evt.results.forEach(function(result){
              console.info(result.graphic.attributes);
            });
          }
        });
      });
    });
  </script>
</head>

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

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

LA · ‎11-08-2017

Thank you, Robert! I hadn't looked at the hitTest() method but this makes sense.