nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS JavaScript API: Select features and display information in an attribute table

HabG_

Hi All,

I have a web map where I can select features using polygon graphics (I have three feature layers, one point and two polygon feature layers). How can I display the results of graphically selected features' in tabular format that is similar to this example, but instead of using the find task, the results should display the attribute information of the graphically selected features.

Thanks.

Najděte více příspěvků označených jako

Accepted answers

JakeSkinner

Hi Hab,

Here is an example on how to do this.

All comments

AngularArchitect

How do I do this in Version 4.17

WillHughes

Hi Jake,

How can I reference the selected features (graphics) on the map? I am trying to pass the selected features' geometries to the ApplyEdits operation for another feature layer. Attempting a copy/paste from feature layer 1 to feature layer 2.

See code in post.

https://community.esri.com/message/892015-select-features-then-applyedits?q=select%20features%20then

Thanks.

JakeSkinner

Hi Robert,

Here you go:

<!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>Grid Selection</title>    
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">    
    
    <style>                      
      html, body, #mapDiv {    
        padding:0;    
        margin:0;    
        height:100%;    
      }    
      
      #rightPane {
        padding: 0;
        width:250px;
      }
      
      button {    
        display: block;    
      } 
      
      #messages{
        padding-top: 40px;
      }   
    </style>    
    
    <script src="http://js.arcgis.com/3.10/"></script>    
    <script>    
      var map, tb, featureLayer1, featureLayer2, featureLayer3;    
    
      require([    
        "esri/map", "esri/toolbars/draw", "dojo/promise/all", "dojo/_base/array",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",    
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/layers/FeatureLayer", "dijit/registry",    
        "esri/graphic", "esri/tasks/query", "esri/tasks/QueryTask", "esri/InfoTemplate", "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore",    
        "esri/Color", "dojo/dom", "dojo/on", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
        "dijit/layout/AccordionContainer", "dojo/domReady!"    
      ], function(    
        Map, Draw, All, arrayUtils,  
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,    
        PictureFillSymbol, CartographicLineSymbol, FeatureLayer, registry,    
        Graphic, Query, QueryTask, InfoTemplate, DataGrid, ItemFileReadStore,   
        Color, dom, on, parser
      ) {    
        
        parser.parse();
        
        map = new Map("mapDiv", {    
          basemap: "streets",    
          center: [-85.82966, 33.666494],    
          zoom: 13    
        });    
        map.on("load", initToolbar);    
            
        featureLayer1 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{    
          mode: FeatureLayer.MODE_SELECTION,    
          infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),    
          outFields: ["*"]    
        });    
            
        featureLayer2 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1",{    
          mode: FeatureLayer.MODE_SELECTION,    
          infoTemplate: new InfoTemplate("Block Group: ${BLKGRP}", "${*}"),    
          outFields: ["*"]    
        });    
            
        featureLayer3 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",{    
          mode: FeatureLayer.MODE_SELECTION,    
          infoTemplate: new InfoTemplate("County Name: ${NAME}", "${*}"),    
          outFields: ["*"]    
        });    
            
        map.addLayers([featureLayer1, featureLayer2, featureLayer3]);    
    
        // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples    
        var markerSymbol = new SimpleMarkerSymbol();    
        markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");    
        markerSymbol.setColor(new Color("#00FFFF"));    
    
        // lineSymbol used for freehand polyline, polyline and line.     
        var lineSymbol = new CartographicLineSymbol(    
          CartographicLineSymbol.STYLE_SOLID,    
          new Color([255,0,0]), 10,     
          CartographicLineSymbol.CAP_ROUND,    
          CartographicLineSymbol.JOIN_MITER, 5    
        );    
    
        // fill symbol used for extent, polygon and freehand polygon    
        var fillSymbol = new SimpleFillSymbol();    
    
        function initToolbar() {    
          tb = new Draw(map);    
          tb.on("draw-end", addGraphic);    
    
          // event delegation so a click handler is not    
          // needed for each individual button    
          on(dom.byId("info"), "click", function(evt) {    
            if ( evt.target.id === "info" ) {    
              return;    
            }    
            var tool = evt.target.id.toLowerCase();    
            map.disableMapNavigation();    
            tb.activate(tool);    
          });    
        }    
    
        function addGraphic(evt) { 
          map.graphics.clear();  
          //deactivate the toolbar and clear existing graphics     
          tb.deactivate();     
          map.enableMapNavigation();    
    
          // figure out which symbol to use    
          var symbol;    
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {    
            symbol = markerSymbol;    
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {    
            symbol = lineSymbol;    
          }    
          else {    
            symbol = fillSymbol;    
          }    
          
          map.graphics.add(new Graphic(evt.geometry, symbol));    
          queryMapService(evt.geometry);    
        }    
            
        function queryMapService(Geom){  
          var promises = [];    
              
          var query = new Query();    
          query.returnGeometry = false;       
          query.outFields = ["*"];       
          query.geometry = Geom;    
          promises.push(featureLayer1.selectFeatures(query, FeatureLayer.SELECTION_NEW));    
          promises.push(featureLayer2.selectFeatures(query, FeatureLayer.SELECTION_NEW));    
          promises.push(featureLayer3.selectFeatures(query, FeatureLayer.SELECTION_NEW));    
          var allPromises = new All(promises);    
          allPromises.then(function (r) { 
            showResults(r); 
          });    
        }    
            
        function showResults(results) {
          var featureLayer1Message = results[0].length;
          var featureLayer2Message = results[1].length;
          var featureLayer3Message = results[2].length;
                            
          var count = 0;
          for(var i = 0; i < results.length; i++){                      
            count = count + results.length;
          }
                                     
          dom.byId("messages").innerHTML = "Total features selected:  <b>" + count + "</b><br>  FeatureLayer1:  <b>" + featureLayer1Message
             + "</b><br>  FeatureLayer2:  <b>" + featureLayer2Message
             + "</b><br>  FeatureLayer3:  " + featureLayer3Message;
          
          var items = arrayUtils.map(results, function (result) {                
            return result;
          });
          
          var allItems = [];
          
          arrayUtils.map(items[0], function(item){
            allItems.push(item.attributes);                
          })
          
          arrayUtils.map(items[1], function(item){
            allItems.push(item.attributes);                
          })
          
          arrayUtils.map(items[2], function(item){
            allItems.push(item.attributes);              
          })
             
          var data = {
            identifier : "OBJECTID", //This field needs to have unique values
            label : "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
            items : allItems
          };

          //Create data store and bind to grid.
          store = new ItemFileReadStore({
            data : data
          });
          var grid = registry.byId("grid");
          grid.setStore(store);
          grid.on("rowclick", onRowClickHandler);
        }
        
        function onRowClickHandler(evt) {             
          var clickedId = evt.grid.getItem(evt.rowIndex).OBJECTID;
          
          var selectedFeature1 = arrayUtils.filter(featureLayer1.getSelectedFeatures(), function (graphic) {
            return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedId);
          });
          
          var selectedFeature2 = arrayUtils.filter(featureLayer2.getSelectedFeatures(), function (graphic) {
            return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedId);
          });
          
          var selectedFeature3 = arrayUtils.filter(featureLayer3.getSelectedFeatures(), function (graphic) {
            return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedId);
          });
          
          if ( selectedFeature1.length ) {
            var center = [selectedFeature1[0].geometry.getLongitude(), selectedFeature1[0].geometry.getLatitude()];
            var zoom = 17;
            map.centerAndZoom(center, zoom);               
          }              
          else if ( selectedFeature2.length ) {
            map.setExtent(selectedFeature2[0].geometry.getExtent(), true);                
          }
          else if ( selectedFeature3.length ) {
            map.setExtent(selectedFeature3[0].geometry.getExtent(), true);                
          }
        }    
      });    
    </script>    
  </head>    
      
  <body class='claro'>    
   <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
    style="width:100%; height:100%;">                   
    <div id="mapDiv" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:250px;">
     <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
      <thead>
        <tr>
          <th field="OBJECTID">ID</th>
          <th field="STATE_FIPS" >State FIPS</th>
          <th field="CNTY_FIPS">County FIPS</th>
          <th field="POP2000">Population 2000</th>              
        </tr>
      </thead>
    </table>
    </div>       
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" class="roundedCorners" id="rightPane">
      <div data-dojo-type="dijit.layout.AccordionContainer">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Graphics'" id='graphics'>
          <div id="info">    
            <div>Select a shape then draw on map to add graphic</div>    
            <button id="Point">Point</button>    
            <button id="Multipoint">Multipoint</button>    
            <button id="Line">Line</button>    
            <button id="Polyline">Polyline</button>    
            <button id="FreehandPolyline">Freehand Polyline</button>    
            <button id="Triangle">Triangle</button>    
            <button id="Extent">Rectangle</button>    
            <button id="Circle">Circle</button>    
            <button id="Ellipse">Ellipse</button>    
            <button id="Polygon">Polygon</button>    
            <button id="FreehandPolygon">Freehand Polygon</button>    
          </div> 
          <div id="messages"></div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend'">
          <div id="legendDiv"></div>
        </div>
      </div>
    </div>   
  </div>
 </body>    
</html>

Mr_Kirkwood

Can you post the <HEAD> information like style sheet links you are using for the code?

HabG_

Thanks Jake as always very helpful.

JakeSkinner

Updated the Fiddle to include zooming to the feature when clicking the data grid:

Edit fiddle - JSFiddle

JakeSkinner

Hi Hab,

Here is an example on how to do this.

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.