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

HabG_ · ‎10-10-2014

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.

JakeSkinner · ‎10-10-2014

Hi Hab,

Here is an example on how to do this.

View solution in original post

JakeSkinner · ‎10-10-2014

Hi Hab,

Here is an example on how to do this.

JakeSkinner · ‎10-10-2014

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

Edit fiddle - JSFiddle

RobertKirkwood · ‎04-17-2015

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

JakeSkinner · ‎04-17-2015

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>

RobertKirkwood · ‎04-17-2015

Thank you!

Zulfiqar_AliSoomro2 · ‎07-07-2015

Hi Jake. I am creating a Map Discovery tool and extending your code. I am trying to search by Geometry, Text (Using Find Task) and By Bounds (DD, DMS, MGRS) with Buffer

I have added the text search but it is not working. Could you please help me add these features including X, Y coordinates (DD) with Buffer. My code is below.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Map Discovery</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">
    <link href="https://community.esri.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    
    <link href="fullmap-template.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="src/src/css/bootstrapmap.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }

      #rightPane {
        padding: 0;
        width:250px;
      }

      #gridDiv {
      height: 20em;
      }
      button {
        display: block;
      }

      #messages{
        padding-top: 0px;
      }
      .btn{
        margin-right:10px;
        margin-bottom: 10px;
      }
      .tabbable-panel {
          border:1px solid #eee;
          padding: 10px;
          position: absolute;
          left:70px;
          top:70px;
          background-color: #fff;
        }

        /* Default mode */
        .tabbable-line > .nav-tabs {
          border: none;
          margin: 0px;
        }
        .tabbable-line > .nav-tabs > li {
          margin-right: 2px;
        }
        .tabbable-line > .nav-tabs > li > a {
          border: 0;
          margin-right: 0;
          color: #737373;
        }
        .tabbable-line > .nav-tabs > li > a > i {
          color: #a6a6a6;
        }
        .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
          border-bottom: 4px solid #fbcdcf;
        }
        .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
          border: 0;
          background: none !important;
          color: #333333;
        }
        .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
          color: #a6a6a6;
        }
        .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
          margin-top: 0px;
        }
        .tabbable-line > .nav-tabs > li.active {
          border-bottom: 4px solid #f3565d;
          position: relative;
        }
        .tabbable-line > .nav-tabs > li.active > a {
          border: 0;
          color: #333333;
        }
        .tabbable-line > .nav-tabs > li.active > a > i {
          color: #404040;
        }
        .tabbable-line > .tab-content {
          margin-top: -3px;
          background-color: #fff;
          border: 0;
          border-top: 1px solid #eee;
          padding: 15px 0;
          left:50px;
        }
        .portlet .tabbable-line > .tab-content {
          padding-bottom: 0;
        }
    </style>

    <script src="http://js.arcgis.com/3.13/"></script>
    <script>
      var map, tb, featureLayer1, featureLayer2, featureLayer3;

      require([
        "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "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", "esri/tasks/FindTask", "esri/tasks/FindParameters", "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer, Draw, All, arrayUtils,
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        PictureFillSymbol, CartographicLineSymbol, FeatureLayer, registry,
        Graphic, Query, QueryTask, InfoTemplate, DataGrid, ItemFileReadStore,
        Color, dom, on, parser, FindTask, FindParameters
      ) {

        var findTask, findParams;
        parser.parse();
        //Load Search
        registry.byId("search").on("click", doFind);
        //Load BaseMap
        map = new Map("mapDiv");
        var basemap = new ArcGISDynamicMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
        // map = new Map("mapDiv", {
        //   basemap: "streets",
        //   center: [-85.82966, 33.666494],
        //   zoom: 13
        // });
        findTask = new FindTask("http://172.16.1.35/arcgis/rest/services/MapIndex/MapServer");

        // map.on("load", initToolbar);
        map.on("load", function () {
      //Create the find parameters
          initToolbar();
          findParams = new FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [7];
          findParams.searchFields = ["MAPNAME", "MAPTYPE", "MAPSCALE"];
          findParams.outSpatialReference = map.spatialReference;
          console.log("find sr: ", findParams.outSpatialReference);
        });
        function doFind() {
          //Set the search text to the value in the box
          findParams.searchText = dom.byId("ownerName").value;
          findTask.execute(findParams, showResult);
        }

        function showResult(results) {
      //This function works with an array of FindResult that the task returns
      map.graphics.clear();
      var symbol = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_SOLID,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),
        new Color([98, 194, 204, 0.5])
      );
      //create array of attributes
      var items = arrayUtils.map(results, function (result) {
        var graphic = result.feature;
        graphic.setSymbol(symbol);
        map.graphics.add(graphic);
        return result.feature.attributes;
      });
      //Create data object to be used in store
      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 : items
      };

      //Create data store and bind to grid.
      store = new ItemFileReadStore({
        data : data
      });
      var grid = registry.byId("grid");
      grid.setStore(store);

      grid.on("rowclick", onRowClickHandlers);

      //Zoom back to the initial map extent
      map.centerAndZoom(center, zoom);
    }
     function onRowClickHandlers(evt) {
      var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).OBJECTID;
      var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
        return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedTaxLotId);
      });
      if ( selectedTaxLot.length ) {
        map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
      }
    }
        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://172.16.1.35/arcgis/rest/services/MapIndex/MapServer/7",{
          mode: FeatureLayer.MODE_SELECTION,
          infoTemplate: new InfoTemplate("Map Attributes Details: ${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 = "<p class=\"bg-danger\" style=\"width:300px; padding:5px;\">Total results selected: <b>" + count + "</b></p>";

          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 createLink(data){
        //   return ("<a href="+data+" data-lightbox='roadtrip'>"+'View Map'+"</a> <img src='zoom.png' style='padding-top:5px;'>");
        //   }
        //   /*set up layout*/
        // var layout = [[
        //   {'name': 'ID', 'field': 'OBJECTID','width': '200px' },
        //   {'name': 'Map Name', 'field': 'MAPNAME','width': '200px'},
        //   {'name': 'Map Scale', 'field': 'MAPSCALE1','width': '200px'},
        //   {'name': 'Map Type', 'field': 'MAPTYPE','width': '200px'},
        //   {'name': 'Produced Date', 'field':'PRINTINGDATE','width': '200px'},
        //   {'name': 'Projection', 'field': 'PROJECTION','width': '200px'},
        //   {'name': 'Map Viewer', 'field': 'HYPLINK','width': '200px', formatter: createLink},
        // ]];
        // /*create a new grid*/
        // var grid = new DataGrid({
        // id: 'grid',
        // store: store,
        // structure: layout,
        // rowSelector: '20px'});
        // /*append the new grid to the div*/
        // grid.placeAt("gridDiv");
        // grid.on("rowclick", onRowClickHandler);
        // /*Call startup() to render the grid*/
        // grid.startup();
        }

        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 class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Map Discovery</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        
        <li class="active dropdown" id="basemapList">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Basemaps <b class="caret"></b></a>
          <ul class="dropdown-menu" id="myDropdown">
            <li><a href="#">Streets</a></li>
            <li><a href="#">Imagery</a></li>
            <li><a href="#">National Geographic</a></li>
            <li><a href="#">Topographic</a></li>
            <li><a href="#">Gray</a></li>
            <li class="divider"></li>
            <li><a href="#">Open Street Map</a></li>
          </ul>
        </li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
</div>
</div>
<div class="container-fluid" id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
    style="width:100%; height:100%;">
              <div id="mapDiv"></div>
    <div class="row">
        <div class="col-md-4">
          <h3>Default Tab</h3>
          <div class="tabbable-panel">
            <div class="tabbable-line">
              <ul class="nav nav-tabs ">
                <li class="active">
                  <a href="#tab_default_1" data-toggle="tab">
                  Search By Text </a>
                </li>
                <li>
                  <a href="#tab_default_2" data-toggle="tab">
                  Search By Geometry
                </a>
                </li>
                <li>
                  <a href="#tab_default_3" data-toggle="tab">
                  Search By Bounds </a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active" id="tab_default_1">
                     Find Maps <input type="text" id="ownerName" size="44" value="" placeholder="Search by name, scale, type, date ..." />
                        <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search
                        </button>
                </div>
                <div class="tab-pane" id="tab_default_2">
                  <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Graphics'" id='graphics'>
                      <div id="info">
                        <p>Select a shape and draw on map to discover maps</p>
                        <div class="btn-group">
                        <button id="Point" type="button" class="btn btn-info ">Point</button>
                        <button id="Multipoint" type="button" class="btn btn-info ">Multipoint</button>
                        <button id="Line" type="button" class="btn btn-info">Line</button>
                        <button id="Polyline" type="button" class="btn btn-info">Polyline</button>
                        <button id="FreehandPolyline" type="button" class="btn btn-success">Freehand Polyline</button>
                        <button id="Triangle" type="button" class="btn btn-success">Triangle</button>
                        <button id="Extent" type="button" class="btn btn-success">Rectangle</button>
                        <button id="Circle" type="button" class="btn btn-success">Circle</button>
                        <button id="Ellipse" type="button" class="btn btn-info">Ellipse</button>
                        <button id="Polygon" type="button" class="btn btn-info">Polygon</button>
                        <button id="FreehandPolygon" type="button" class="btn btn-info">Freehand Polygon</button>
                      </div>
                      </div>
                      <div id="messages"></div>
                </div>
                </div>
                <div class="tab-pane" id="tab_default_3">

                </div>
              </div>
            </div>
          </div>
        </div>
      </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'" formatterScope="myFormatters">
      <thead>
        <tr>
          <th field="OBJECTID" width='50px'>ID</th>
          <th field="MAPNAME" width='300px'>Name</th>
          <th field="MAPTYPE" width='200px'>Map Type</th>
          <th field="MAPSCALE1" width='100px'>Map Scale</th>
          <th field="PRINTINGDATE" width='200px'>Date Produced</th>
          <th field="PROJECTION" width='200px'>Projection</th>
          <th field="HYPLINK" width='200px' formatter="formatLink">Map</th>
          <th field="PUBLISHEDBY" width='200px'>Published By</th>
          <th field="SHAPE_Area" width='200px'>Shape Area</th>
        </tr>
      </thead>
    </table>
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
var myFormatters = {
   formatLink : function(value, index) {
    return "<a href="+value+" data-lightbox='roadtrip'>"+'View Map'+"</a> <img src='zoom.png' style='padding-top:5px;'>";
   }
};
</script>
</body>
</html>

AngularArchitect · ‎12-06-2020

How do I do this in Version 4.17

HabG_ · ‎10-10-2014

Thanks Jake as always very helpful.

WillHughes · ‎11-19-2019

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.