AnsweredAssumed Answered

Feature Table Refresh

Question asked by CGSJohnson on Dec 5, 2016
Latest reply on Dec 7, 2016 by CGSJohnson

I am using the JavaScript API version 3.16 and I am developing an application that loads three scale dependent feature layers on a map.  The layers are being added to the map after the data in a column in the layer is classified via the generateRendererTask.  There are feature tables associated with each layer and the appropriate feature table is visible when the corresponding feature layer is shown on the map.  I have a couple questions...

 

1. Thanks to the code from Robert Scheitlin, the feature table updates on zoom in.  On zoom out, it does not update accurately.  If I change the spatial relationship to "CONTAINS" it does.  Is it correct to change that parameter?

 

2. When the second feature layer displays, the header of the table is correct, but not the actual table results.  What method should I use?   I tried featureTable.grid.setStore, but that did not work.

<!DOCTYPE html>
<html>

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Feature Table Example For ESRI</title>
     <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
     <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
     <script src="https://js.arcgis.com/3.16/"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

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

          #map {
               width: 100%;
               height: 500px;
               margin: 0;
               padding: 0;
          }

          #divGrid {
               position: absolute;
               left: 0px;
               top: 525px;
               background-color: white;
               z-index: 999;
               overflow: scroll;
               width: 100%;
               height: 400px;
               margin-bottom: 20px;
          }

          #citypoints {
               position: absolute;
               background-color: white;
               z-index: 999;
               overflow: scroll;
               width: 100%;
               height: 100%;
          }

          #citypolys {
               position: absolute;
               background-color: white;
               z-index: 999;
               overflow: scroll;
               width: 100%;
               height: 100%;
          }

          #tractpolys {
               position: absolute;
               background-color: white;
               z-index: 999;
               overflow: scroll;
               width: 100%;
               height: 100%;
          }

          .displaynone {
               display: none;
          }

          #divShowHideTable {
               position: absolute;
               top: 317px;
               left: 20px;
               z-index: 50;
          }

          #imgHiddenTable:hover {
               cursor: pointer;
          }

          #imgShownTable:hover {
               cursor: pointer;
          }

          /*#divGrid {
               position: absolute;
               top: 500px;
               width: 100%;
               height: 40%;
          }*/

     </style>


     <script>

          // declare variables and instantiate some
          var map, grid, fl_url, symbol, polygonSymbol, highlightSymbol, pointSymbol, outlineSymbol, line, renderer, featureLayer, loading, myFeatureTable, idx, title, content, drawingOptions, placeholdertxt, whereclause, fieldsToDisplay, selectionToolbar, val, fieldsoutputted, fieldsarray, lblgridheadertxt, citypointlayer, stateoutlinelayer, cityoutlinelayer, citypolygonlayer, tractpolygonlayer, citypointrenderer, stateoutlinerender, cityoutlinerenderer, citypolygonrenderer, tractpolygonrenderer, tb, citypointFT, citypolyFT, tractpolyFT, rfrshtbls, initld;
          var visiblelayers = [],
               symbolArray = [],
               labelArray = [],
               fieldsToSearch = [];

          var renderedField = 'pop2000';
          var DataUnavailableTxt = "Population < 50",
               oldExtent = null;

          // initialize modules and classes
          require([
               "esri/map"
               , "esri/graphic"
               , "esri/dijit/Basemap"
               , "esri/dijit/BasemapLayer"
               , "esri/dijit/BasemapGallery"
               , "esri/arcgis/utils"
               , "esri/urlUtils"
               , "esri/geometry/webMercatorUtils"
               , "esri/dijit/Search"
               , "esri/layers/FeatureLayer"
               , "esri/dijit/FeatureTable"
               , "esri/geometry/Extent"
               , "esri/geometry/Polygon"
               , "esri/symbols/SimpleFillSymbol"
               , "esri/layers/ArcGISDynamicMapServiceLayer"
               , "esri/layers/ImageParameters"
               , "esri/InfoTemplate"
               , "esri/renderers/ClassBreaksRenderer"
               , "esri/tasks/GenerateRendererParameters"
               , "esri/tasks/GenerateRendererTask"
               , "esri/tasks/ClassBreaksDefinition"
               , "esri/symbols/SimpleMarkerSymbol"
               , "esri/symbols/SimpleLineSymbol"
               , "esri/renderers/SimpleRenderer"
               , "esri/tasks/AlgorithmicColorRamp"
               , "esri/lang"
               , "dojo/_base/lang"
               , "esri/toolbars/draw"
               , "esri/geometry/Point"
               , "esri/geometry/geometryEngine"
               , "esri/dijit/Scalebar"
               , "esri/layers/LayerDrawingOptions"
               , "esri/request"
               , "dojo/dom-construct"
               , "esri/tasks/QueryTask"
               , "esri/tasks/query"
               , "esri/Color"
               , "dijit/form/Slider"
               , "dojo/dom-style"
               , "dgrid/Selection"
               , "dojo/ready"
               , "dojo/on"
               , "dojo/_base/array"
               , "dojox/gfx"
               , "esri/symbols/jsonUtils"
               , "dojo/_base/array"
               , "dojo/dom"
               , "dijit/form/Button"
               , "dojo/data/ItemFileReadStore"
               , "dijit/registry"
               , "dojo/parser"
               , "dojo/_base/declare"
               , "dijit/layout/BorderContainer"
               , "dijit/layout/ContentPane"
               , "dijit/form/TextBox"
               , "dgrid/extensions/ColumnHider"
               , "dojo/domReady!"
          ], function(
               Map
               , Graphic
               , Basemap
               , BasemapLayer
               , BasemapGallery
               , arcgisUtils
               , urlUtils
               , webMercatorUtils
               , Search
               , FeatureLayer
               , FeatureTable
               , Extent
               , Polygon
               , SimpleFillSymbol
               , ArcGISDynamicMapServiceLayer
               , ImageParameters
               , InfoTemplate
               , ClassBreaksRenderer
               , GenerateRendererParameters
               , GenerateRendererTask
               , ClassBreaksDefinition
               , SimpleMarkerSymbol
               , SimpleLineSymbol
               , SimpleRenderer
               , AlgorithmicColorRamp
               , esriLang
               , lang
               , Draw
               , Point
               , geometryEngine
               , Scalebar
               , LayerDrawingOptions
               , esriRequest
               , domConstruct
               , QueryTask
               , Query
               , Color
               , Slider
               , domStyle
               , Selection
               , ready
               , on
               , arrayUtils
               , gfx
               , jsonUtils
               , array
               , dom
               , Button
               , ItemFileReadStore
               , registry
               , parser
               , declare
               , BorderContainer
               , ContentPane
               , TextBox
               , ColumnHider
               , ready
          )
          {

               parser.parse();

               var DynamicMapServiceURL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";


               // define symbols
               highlightSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_SOLID).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([91, 91, 91]), 3)).setColor(new Color([125, 125, 125, 0.35]));

               polygonSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_SOLID).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153, 153]));

               pointSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setSize(8).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([85, 85, 85]), 1)).setColor(new Color([153, 153, 153]));

               outlineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([91, 91, 91]), 1);

               // intial map extent
               var initialExtent = new esri.geometry.Extent({
                    "xmin": -19525916.67711644,
                    "ymin": 1491562.5722065126,
                    "xmax": -2404022.3412415087,
                    "ymax": 9318714.26860648,
                    "spatialReference": {
                         "wkid": 102100
                    }
               });

               // instantiate infoTemplate
               var infotemp = new InfoTemplate();

               // define the dynamic map service layer and the image parameter attribute it uses
               var imageParameters = new ImageParameters();
               imageParameters.format = "png";

               var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(DynamicMapServiceURL, {
                    "opacity": 1.0,
                    "imageParameters": imageParameters
               });

               // add a map to the page
               map = new Map("map", {
                    //zoom: 4,
                    basemap: "gray",
                    extent: initialExtent
                    //,infoTemplate: infotemp
               });

               // events that fire, based on actions in the UI

               // the function below displays an error message and hides the div in which the map is drawn
               function showErr(err)
               {
                    'use strict';

                    console.log("Error Details: ", err);
               }

               on(dom.byId("imgShownTable"), "click", function(e)
               {
                    // hide the table
                    //ShowElement(e.id, 'divGrid', '', '');
                    $('#divGrid').hide();

                    // show the hidden Legend image  and hide the shown Legend image
                    $('#divShownTable').hide();
                    $('#divHiddenTable').show();
               });

               on(dom.byId("imgHiddenTable"), "click", function(e)
               {
                    // show the table
                    //ShowElement(e.id, 'divGrid', '', '');
                    $('#divGrid').show();

                    showHideGridAndLegend();

                    // hide the hidden Legend image and show the shown Legend image
                    $('#divShownTable').show();
                    $('#divHiddenTable').hide();
               });

               // set the initial visibility of the controls in the UI
               function setInitialVisibilityOfControls()
               {
                    'use strict';

                    // show buttons/controls
                    //$('#divHiddenLegend').show();

                    //$('#divHiddenOtherControls').show();

                    $('#divHiddenTable').show();

                    //$('#divDraw').show();

                    //// hide divs that contain controls
                    //$('#divLegend').hide();

                    //$('#divOtherControls').hide();

                    $('#divGrid').hide();

                    // make the controls draggable
                    //$("#divLegend").draggable({ containment: "#divMap", scroll: false });

                    //$('#divOtherControls').draggable({ containment: "#divMap", scroll: false });

                    //$('#divGrid').draggable({ containment: "#divMap", scroll: false });
               }

               // hide the mouse-over effect (infowindow and any graphics) when the cursor moves outside of the map extent
               map.on("mouse-out", function(evt)
               {
                    var loc = evt.mapPoint;
                    if (!map.extent.contains(loc))
                    {
                         map.infoWindow.hide();
                         map.graphics.clear();
                    }
               });

               // substitute the "(" and ", " in the CI values
               map.infoWindow.on("show", function()
               {
                    map.infoWindow.setContent(map.infoWindow._contentPane.innerHTML.replace(/\(|\)/g, '').replace(/, /g, ' - '));
               });

               // clear any graphics on the map when the infowindow hides/goes away
               map.infoWindow.on("hide", function()
               {
                    map.graphics.clear();
               });

               //create new FeatureTable and set its properties
               function AddGrid(lyrid, gridloc)
               {
                    'use strict';

                    var existingGrid = dijit.byId(gridloc);

                    if (existingGrid)
                    {
                         existingGrid.destroyRecursive(true);
                    }

                    if (lyrid === 3)
                    {
                         tractpolyFT = new FeatureTable({
                              "featureLayer": tractpolygonlayer,
                              "map": map,
                              "showStatistics": false,
                              "zoomToSelection": false,
                              "syncSelection": true,
                              "outFields": ["*"]
                         }, gridloc);

                         tractpolyFT.startup();

                    } else
                    {
                         if (lyrid === 0)
                         {
                              citypointFT = new FeatureTable({
                                   "featureLayer": citypointlayer,
                                   "map": map,
                                   "showStatistics": false,
                                   "zoomToSelection": false,
                                   "syncSelection": true,
                                   "outFields": ["*"]
                              }, gridloc);

                              citypointFT.startup();
                         } else
                         {
                              citypolyFT = new FeatureTable({
                                   "featureLayer": citypolygonlayer,
                                   "map": map,
                                   "showStatistics": false,
                                   "zoomToSelection": false,
                                   "syncSelection": true,
                                   "outFields": ["*"]
                              }, gridloc);

                              citypolyFT.startup();
                         }
                    }
               }

               // this is a custom function used to format fields in the feature table and popup
               formatVal = function(val)
               {
                    return val.replace(/\(|\)/g, '').replace(/, /g, ' - ');
               }

               // the 3 functions below are formatting functions, with their origins documented above them
               //http://stackoverflow.com/questions/18082/validate-decimal-numbers-in-javascript-isnumeric?page=1&tab=votes#1830844
               var isNumber = function(n)
               {
                    return !isNaN(parseFloat(n)) && isFinite(n);
               };

               //http://james.padolsey.com/javascript/wordwrap-for-javascript/
               function wordwrap(str, width, brk, cut)
               {
                    'use strict';

                    brk = brk || '\n';
                    width = width || 75;
                    cut = cut || false;

                    if (!str)
                    {
                         return str;
                    }

                    var regex = '.{1,' + width + '}(\\s|$)' + (cut ? '|.{' + width + '}|.+$' : '|\\S+?(\\s|$)');

                    //this line will cause a JSLint error: Missing 'new' prefix when invoking a constructor (this error can be ignored)
                    return str.match(RegExp(regex, 'g')).join(brk);
               }

               function formatValues(num)
               {
                    'use strict';

                    return number.format(num, {
                         "places": 1
                    });
               }

               // this function is a modification of the one just above
               function formatValues2(num)
               {
                    'use strict';

                    return num = num.toFixed(1);
               }

               // the functions below dynamically generate a renderer and apply that
               // renderer generated by the createRenderer function above to the featureLayer and adds labels.
               // using individual functions, as trying to use a generic/parameterized one before did not work
               function applyctyptRenderer(citypointrenderer)
               {
                    'use strict';

                    citypointrenderer.defaultLabel = DataUnavailableTxt;

                    citypointrenderer.defaultSymbol = pointSymbol;

                    citypointlayer.setRenderer(citypointrenderer);

                    citypointlayer.renderer.setOpacityInfo(0.7);

                    map.addLayer(citypointlayer);
               }

               function applystoutRenderer(stateoutlinerenderer)
               {
                    'use strict';

                    stateoutlinerenderer.defaultLabel = DataUnavailableTxt;

                    stateoutlinerenderer.defaultSymbol = outlineSymbol;

                    stateoutlinelayer.setRenderer(stateoutlinerenderer);

                    map.addLayer(stateoutlinelayer);
               }

               function applyctyoutRenderer(cityoutlinerenderer)
               {
                    'use strict';

                    cityoutlinerenderer.defaultLabel = DataUnavailableTxt;

                    cityoutlinerenderer.defaultSymbol = outlineSymbol;

                    cityoutlinelayer.setRenderer(cityoutlinerenderer);

                    map.addLayer(cityoutlinelayer);
               }

               function applyctypolyRenderer(citypolygonrenderer)
               {
                    'use strict';

                    citypolygonrenderer.defaultLabel = DataUnavailableTxt;

                    citypolygonrenderer.defaultSymbol = polygonSymbol;

                    citypolygonlayer.setRenderer(citypolygonrenderer);

                    citypolygonlayer.renderer.setOpacityInfo(0.7);

                    map.addLayer(citypolygonlayer);
               }

               function applytrtpolyRenderer(tractpolygonrenderer)
               {
                    'use strict';

                    tractpolygonrenderer.defaultLabel = DataUnavailableTxt;

                    tractpolygonrenderer.defaultSymbol = polygonSymbol;

                    tractpolygonlayer.setRenderer(tractpolygonrenderer);

                    tractpolygonlayer.renderer.setOpacityInfo(0.7);

                    map.addLayer(tractpolygonlayer);
               }

               function createRenderer(lyr, field)
               {
                    'use strict';

                    var classDef = new ClassBreaksDefinition();
                    classDef.classificationField = field;
                    classDef.classificationMethod = $('#islClassifiers').val() ? $('#islClassifiers').val() : "natural-breaks";
                    classDef.breakCount = $('#islClassifiersCount').val() ? $('#islClassifiersCount').val() : 7;

                    switch (lyr)
                    {
                         case 0:
                              classDef.baseSymbol = pointSymbol;
                              break;

                         case 2:
                              classDef.baseSymbol = polygonSymbol;
                              break;

                         case 3:
                              classDef.baseSymbol = polygonSymbol;
                              break;


                         default:
                              classDef.baseSymbol = outlineSymbol;
                              break;
                    }

                    var colorRamp = new AlgorithmicColorRamp();

                    switch ($('#islColorScheme').val())
                    {
                         case 'OriginalBlue':
                              // original that we use on BRFSS
                              colorRamp.fromColor = new Color.fromHex("#F0F9E8");
                              colorRamp.toColor = new Color.fromHex("#2b8cbe");
                              break;

                         case 'Prevention':
                              // default color scheme for prevention
                              colorRamp.fromColor = new Color.fromHex("#ffffcc");
                              colorRamp.toColor = new Color.fromHex("#0c2c84");
                              break;

                         case 'UnhealthyBehaviors':
                              // default color scheme for unhealthy behaviors and healthy outcomes
                              colorRamp.fromColor = new Color.fromHex("#ffffd4");
                              colorRamp.toColor = new Color.fromHex("#8c2d04");
                              break;

                         case 'HealthyOutcomes':
                              // default color scheme for unhealthy behaviors and healthy outcomes
                              colorRamp.fromColor = new Color.fromHex("#ffffd4");
                              colorRamp.toColor = new Color.fromHex("#8c2d04");
                              break;

                         case 'Orange':
                              // another option -- orange-ish
                              colorRamp.fromColor = new Color.fromHex("#ffffe5");
                              colorRamp.toColor = new Color.fromHex("#662506");
                              break;

                         default:
                              // another option -- blue-ish
                              colorRamp.fromColor = new Color.fromHex("#ffffd9");
                              colorRamp.toColor = new Color.fromHex("#081d58");
                              break;
                    }

                    colorRamp.algorithm = "hsv";
                    classDef.colorRamp = colorRamp;

                    var params = new GenerateRendererParameters();
                    params.classificationDefinition = classDef;
                    params.where = whereclause;

                    var generateRenderer = new GenerateRendererTask(DynamicMapServiceURL + "/" + lyr);

                    // apply a different renderer, based on the layer
                    switch (lyr)
                    {
                         case 0:
                              generateRenderer.execute(params, applyctyptRenderer, showErr);
                              break;

                         case 2:
                              generateRenderer.execute(params, applyctypolyRenderer, showErr);
                              break;

                         case 3:
                              generateRenderer.execute(params, applytrtpolyRenderer, showErr);
                              break;

                         default:
                              break;
                    }
               }

               // show the attributes in a custom way
               function showCustomIW(e, lyrid)
               {
                    'use strict';

                    map.graphics.clear();
                    var graphic = e.graphic;

                    setIWTitleAndContent(lyrid);

                    map.infoWindow.setTitle(esriLang.substitute(graphic.attributes, infotemp.title));
                    map.infoWindow.setContent(esriLang.substitute(graphic.attributes, infotemp.content));

                    lyrid === '0' || lyrid === '2' ? map.infoWindow.resize(350, 250) : map.infoWindow.resize(350, 150);

                    var highlightGraphic = new Graphic(graphic.geometry, lyrid === '0' ? pointSymbol : polygonSymbol);

                    map.graphics.add(highlightGraphic);
                    map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
               }

               // hide the infowindow and any graphics
               function hideInfoWindow()
               {
                    'use strict';

                    map.graphics.clear();
                    map.infoWindow.hide();
               }

               // set title and content of infowindow
               function setIWTitleAndContent(layerid)
               {
                    'use strict';

                    map.infoWindow.hide();

                    title = "${areaname}";
                    content = "${*}";

                    infotemp.setTitle(title);
                    infotemp.setContent(content);
               }

               function LoadCityPointLayer()
               {
                    'use strict';

                    //#region CityPointLayer
                    // add city point layer

                    citypointlayer = new FeatureLayer(DynamicMapServiceURL + "/0", {
                         mode: FeatureLayer.MODE_ONDEMAND,
                         outFields: ["*"],
                         //infoTemplate: infotemp,
                         id: "City Point Layer",
                         minScale: 0,
                         maxScale: 4622324
                    });

                    createRenderer(0, renderedField);

                    //citypointlayer.on("click", function(evt)
                    //{
                    //     showCustomIW(evt, 0);
                    //});

                    //citypointlayer.on("mouse-over", function(evt)
                    //{
                    //     showCustomIW(evt, 0);
                    //});

                    //citypointlayer.on("mouse-out", hideInfoWindow);

                    citypointlayer.on("selection-complete", function(e)
                    {
                         var results = [];

                         arrayUtils.forEach(e.features, function(feature)
                         {
                              results.push(feature.attributes.OBJECTID);
                         });
                         citypointFT.selectedRowIds = results;
                         citypointFT._showSelectedRecords();
                         citypointFT._gridTitleNode.innerHTML = citypointlayer.name + ' (' + (results.length != 'undefined' ? (results.length > 1 ? results.length + ' Features)' : 1 + ' Feature)') : "");
                    });

                    citypointlayer.on("selection-clear", function(e)
                    {
                         citypointlayer.setSelectionSymbol(null);
                         map.setExtent(map.extent);
                    });

                    AddGrid(0, "citypoints");

                    // limit the feature table to the records of the feature layer in the current map extent
                    // sort, as well
                    citypointlayer.on("load", function(evt)
                    {
                         citypointFT.grid.set('sort', [{
                              attribute: "NAME"
                         }]);

                         var extent = citypointlayer.fullExtent;

                         if (webMercatorUtils.canProject(extent, map))
                         {
                              map.on("extent-change", lang.hitch(this, function(params)
                              {
                                   // do not highlight the features when the map extent changes, as can be seen from below...it triggers a selection
                                   citypointlayer.setSelectionSymbol(null);

                                   // taken from https://community.esri.com/thread/173929
                                   var query = new Query();
                                   query.geometry = params.extent;
                                   query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
                                   citypointlayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
                              }))
                         }
                    });
                    //#endregion
               }

               function LoadCityPolygonLayer()
               {
                    'use strict';

                    //#region CityPolygonLayer

                    // add city polygon layer

                    citypolygonlayer = new FeatureLayer(DynamicMapServiceURL + "/2", {
                         mode: FeatureLayer.MODE_ONDEMAND,
                         outFields: ["*"],
                         //infoTemplate: infotemp,
                         id: "City Polygon Layer",
                         minScale: 4622324,
                         maxScale: 1155581
                    });

                    createRenderer(2, renderedField);

                    //citypolygonlayer.on("click", function(evt)
                    //{
                    //     showCustomIW(evt, 2);
                    //});

                    //citypolygonlayer.on("mouse-over", function(evt)
                    //{
                    //     showCustomIW(evt, 2);
                    //});

                    //citypolygonlayer.on("mouse-out", hideInfoWindow);

                    citypolygonlayer.on("selection-complete", function(e)
                    {
                         var results = [];

                         arrayUtils.forEach(e.features, function(feature)
                         {
                              results.push(feature.attributes.OBJECTID);
                         });
                         citypolyFT.selectedRowIds = results;
                         citypolyFT._showSelectedRecords();
                         citypolyFT._gridTitleNode.innerHTML = citypolygonlayer.name + ' (' + (results.length != 'undefined' ? (results.length > 1 ? results.length + ' Features)' : 1 + ' Feature)') : "");
                    });

                    citypolygonlayer.on("selection-clear", function(e)
                    {
                         citypolygonlayer.setSelectionSymbol(null);
                         map.setExtent(map.extent);
                    });

                    AddGrid(2, "citypolys");

                    // limit the feature table to the records of the feature layer in the current map extent
                    // sort, as well
                    citypolygonlayer.on("load", function(evt)
                    {
                         citypolyFT.grid.set('sort', [{
                              attribute: "NAME"
                         }]);

                         var extent = citypolygonlayer.fullExtent;

                         if (webMercatorUtils.canProject(extent, map))
                         {
                              map.on("extent-change", lang.hitch(this, function(params)
                              {
                                   // do not highlight the features when the map extent changes, as can be seen from below...it triggers a selection
                                   citypolygonlayer.setSelectionSymbol(null);

                                   // taken from https://community.esri.com/thread/173929
                                   var query = new Query();
                                   query.geometry = params.extent;
                                   query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
                                   citypolygonlayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
                              }))
                         }
                    });

                    //#endregion
               }

               function LoadTractPolygonLayer()
               {
                    'use strict';

                    //#region TractPolygonLayer

                    // add census tract polygon layer

                    tractpolygonlayer = new FeatureLayer(DynamicMapServiceURL + "/3", {
                         mode: FeatureLayer.MODE_ONDEMAND,
                         outFields: ["*"],
                         //infoTemplate: infotemp,
                         id: "Census Tract Polygon Layer",
                         minScale: 1155581,
                         maxScale: 0
                    });

                    createRenderer(3, renderedField);

                    //tractpolygonlayer.on("click", function(evt)
                    //{
                    //     showCustomIW(evt, 3);
                    //});

                    //tractpolygonlayer.on("mouse-over", function(evt)
                    //{
                    //     showCustomIW(evt, 3);
                    //});

                    //tractpolygonlayer.on("mouse-out", hideInfoWindow);

                    tractpolygonlayer.on("selection-complete", function(e)
                    {
                         var results = [];

                         arrayUtils.forEach(e.features, function(feature)
                         {
                              results.push(feature.attributes.OBJECTID);
                         });
                         tractpolyFT.selectedRowIds = results;
                         tractpolyFT._showSelectedRecords();
                         tractpolyFT._gridTitleNode.innerHTML = tractpolygonlayer.name + ' (' + (results.length != 'undefined' ? (results.length > 1 ? results.length + ' Features)' : 1 + ' Feature)') : "");
                    });

                    tractpolygonlayer.on("selection-clear", function(e)
                    {
                         tractpolygonlayer.setSelectionSymbol(null);
                         map.setExtent(map.extent);
                    });

                    AddGrid(3, "tractpolys");

                    // limit the feature table to the records of the feature layer in the current map extent
                    // sort, as well
                    tractpolygonlayer.on("load", function(evt)
                    {
                         tractpolyFT.grid.set('sort', [{
                              attribute: "plc_tract2010"
                         }]);

                         var extent = tractpolygonlayer.fullExtent;

                         if (webMercatorUtils.canProject(extent, map))
                         {
                              map.on("extent-change", lang.hitch(this, function(params)
                              {
                                   // do not highlight the features when the map extent changes, as can be seen from below...it triggers a selection
                                   tractpolygonlayer.setSelectionSymbol(null);

                                   // taken from https://community.esri.com/thread/173929
                                   var query = new Query();
                                   query.geometry = params.extent;
                                   query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
                                   tractpolygonlayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
                              }))
                         }
                    });

                    //#endregion
               }

               // the function below shows/hides the appropriate feature table, based on the map scale
               function showHideGridAndLegend()
               {
                    'use strict';

                    //console.log(map.getScale());
                    switch (true)
                    {
                         case (map.getScale() >= 4622324):

                              $('#citypoints').show();
                              $('#citypolys').hide();
                              $('#tractpolys').hide();

                              // the feature table is sometimes not shown expanded when the window showing it opens
                              // a search online led me to a post that recommended re-sizing the table, after the window has been opened
                              // this is an attempt that only works occasionally, right now
                              if (citypointFT)
                              {
                                   citypointFT.grid.resize();
                              }

                              break;

                         case (map.getScale() < 4622324 && map.getScale() > 1155581):

                              $('#citypoints').hide();
                              $('#citypolys').show();
                              $('#tractpolys').hide();

                              // the feature table is sometimes not shown expanded when the window showing it opens
                              // a search online led me to a post that recommended re-sizing the table, after the window has been opened
                              // this is an attempt that only works occasionally, right now
                              if (citypolyFT)
                              {
                                   citypolyFT.grid.resize();
                              }

                              break;

                         case (map.getScale() <= 1155581):

                              $('#citypoints').hide();
                              $('#citypolys').hide();
                              $('#tractpolys').show();

                              // the feature table is sometimes not shown expanded when the window showing it opens
                              // a search online led me to a post that recommended re-sizing the table, after the window has been opened
                              // this is an attempt that only works occasionally, right now
                              if (tractpolyFT)
                              {
                                   tractpolyFT.grid.resize();
                              }

                              break;

                         default:

                              $('#citypoints').hide();
                              $('#citypolys').hide();
                              $('#tractpolys').hide();


                              break;
                    }
               }

               // the function below zooms to the map extent of the results of a query
               function getMapExtentOnZoom(result)
               {
                    'use strict';

                    // without the delays in calling the functions below, the functionality was not consistent.
                    if (result.features[0] !== 'undefined' && typeof result.features[0] !== 'undefined')
                    {
                         setTimeout(function()
                         {
                              //map.setExtent(result.features[0].geometry.getExtent().expand(1.45));
                              map.setExtent(result.features[0].geometry.getExtent(), true);
                         }, 450);
                    } else
                    {
                         setTimeout(function()
                         {
                              map.setExtent(initialExtent, true);
                         }, 450);
                    }

                    //showHideGridAndLegend();
               }

               // the function below queries the feature layer, based on if the where clause has a value or not
               // if it does not, it uses the current map extent/geometry to limit the feature layer query
               function zoomToSelection()
               {
                    'use strict';

                    var loc, idx;

                    // set the layer to use, based on the selected input controls --
                    // States for City data and City polygons for Census data
                    if ($('#islCities').val() !== 'undefined' && typeof $('#islCities').val() !== 'undefined')
                    {
                         loc = $('#islCities').val();
                         idx = 3;

                    } else
                    {
                         loc = $('#islStates').val() === '59' ? '1=1' : $('#islStates').val();
                         idx = 1;
                    }

                    if (typeof (loc) !== 'undefined' && loc.length > 1)
                    {
                         // define the field to query to get the extent to show on zoom To
                         var qryfield = loc;

                         // assigning the spatial reference here, once the map is already created
                         var qry = new Query();
                         qry.outSpatialReference = map.SpatialReference;
                         qry.returnGeometry = true;

                         if (idx === 3)
                         {
                              qry.where = "STPL_FIPS = '" + qryfield + "'";
                         } else
                         {
                              qry.where = "STATE = '" + qryfield + "'";
                         }

                         qry.where = qry.where.replace(/'/g, "QUOTE");

                         var qryTask = new QueryTask(DynamicMapServiceURL + "/" + idx);

                         qryTask.execute(qry, getMapExtentOnZoom, showErr);
                    }
               }

               // function that calls individual functions to load the layers and tables and zoom, if necessary
               function LoadLayers()
               {
                    'use strict';

                    //renderedField = $('#islMeasures option:selected').val() !== '' && typeof $('#islMeasures option:selected').val() !== 'undefined' ? $('#islMeasures option:selected').val() + "_CrudePrev" : 'BINGE_CrudePrev';
                    //CI = $('#islMeasures option:selected').val() !== '' && typeof $('#islMeasures option:selected').val() !== 'undefined' ? $('#islMeasures option:selected').val() + "_Crude95CI" : "BINGE_Crude95CI";

                    renderedField = 'pop2000';

                    LoadCityPointLayer();

                    LoadCityPolygonLayer();

                    LoadTractPolygonLayer();

                    //LoadStateOutlineAndCityBoundaryLayers();

                    // add drawing toolbox
                    //addDrawingTools();
               }

               // remove layers from the map
               function RemoveLayers()
               {
                    'use strict';

                    map.removeLayer(citypointlayer);
                    map.removeLayer(citypolygonlayer);
                    map.removeLayer(tractpolygonlayer);

                    //map.removeLayer(dynamicMapServiceLayer);
               }

               // load the feature layers when the map loads
               map.on("load", function()
               {

                    // add feature layers to the map and associated behaviors of feature layers

                    LoadLayers();

                    // set initil visibility of buttons/divs/etc.
                    setInitialVisibilityOfControls();
               });

               // determine which feature table to show when a user zooms
               map.on("extent-change", showHideGridAndLegend);
          });

     </script>

</head>

<body class="claro esri">
     <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%">
               <div id="map">
                    <div id="divShowHideTable">
                         <div id="divShownTable" class="displaynone">
                              <img alttext="Image that displays when the Feature Table is showing."
                                    src="Shared.Images.table_selected.png"
                                    id="imgShownTable"
                                    tooltip="Hide Table" />

                         </div>
                         <div id="divHiddenTable" class="displaynone">
                              <img alttext="Image that displays when the Feature Table is hidden."
                                    src="Shared.Images.table_default.png"
                                    id="imgHiddenTable"
                                    tooltip="Show Table" />

                         </div>
                    </div>
               </div>
          </div>
     </div>
     <div id="divGrid">
          <div id="citypoints"></div>
          <div id="citypolys"></div>
          <div id="tractpolys"></div>
     </div>
</body>
</html>

 

Any help is greatly appreciated.  Thanks.

 

- Chris

Outcomes