Select Map Feature from Grid

jaykapalczynski · ‎03-31-2017

I have a query Task that is running and creating a NEW graphics layer and displaying that in the map along with all the records from the query being displayed in a grid.

I now want to select the Feature in the map based on an ID select in the table. My example is a bit different than the ESRI example in that I don't have a Feature Layer Defined. I am querying the data and creating a Graphics Layer. I am trying the below and cant seem to get it working...

Thoughts?

queryTask.on("complete", function(event) {
   var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
   new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
   new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.35]));

   var symbol = new SimpleMarkerSymbol({
      // SNIP  Remove code for this example
   });
   var features = event.featureSet.features;
   var countiesGraphicsLayer = new GraphicsLayer();
   var featureCount = features.length;
   map.graphics.clear();
   for (var i = 0; i < featureCount; i++) {
      var graphic = features[i]; //Feature is a graphic
      graphic.setSymbol(symbol);
      graphic.setInfoTemplate(infoTemplate);
      map.graphics.add(graphic);
   }
 });


// fires when a row in the dgrid is clicked
   function selectState(e) {
     var fl = map.getLayer("countiesGraphicsLayer");
        fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
        var query = new Query();
        query.objectIds = [parseInt(e.target.innerHTML, 10)];
            fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) {
              if ( result.length ) {
                // re-center the map to the selected feature
                window.map.centerAt(result[0].geometry.getExtent().getCenter());
              } else {
                console.log("Feature Layer query returned no features... ", result);
              }
            });
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎04-01-2017

This is a follow-up for this thread: https://community.esri.com/thread/192648-return-results-options

Jay,

Here is how you would do it for your sample code (I have comments in the code):

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.20/dijit/themes/nihilo/nihilo.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dojo/resources/dojo.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dgrid/css/skins/nihilo.css">
  <script type="text/javascript" src="https://js.arcgis.com/3.20"></script>

  <style type="text/css">
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: white;
      overflow: hidden;
      font-family: "Kimberley", sans-serif
    }

    #header {
      -moz-border-radius: 5px;
      margin: 1px;
      padding-top: 10px;
      padding-left: 10px;
      background-color: Black;
      color: white;
      font-size: 18pt;
      text-align: left;
      font-weight: bold;
      border: solid 0px black;
      height: 65px;
    }

    .banner {
      font-size: 0pt;
      padding-right: 20px;
    }

    .banner1 {
      font-size: 10pt;
    }

    .banner2 {
      font-size: 18pt;
      font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
      padding-top: 8px;
    }

    .bannerN {
      padding-top: 2px;
      padding-right: 0px;
    }

    #navigation {
      -moz-border-radius: 5px;
      margin: 1px;
      padding-top: 7px;
      padding-right: 8px;
      background-color: #333333;
      color: white;
      font-size: 10pt;
      text-align: right;
      border: solid 0px black;
      height: 20px;
    }

    #footer {
      /*margin: 2px;*/
      /*padding-right: 10px;*/
      /*background-color: black;*/
      color: white;
      border: solid 2px black;
      font-size: 10pt;
      text-align: right;
      height: 250px;
      padding-top: 5px;
    }

    #rightPane {
      margin: 3px;
      padding: 10px;
      background-color: white;
      color: #421b14;
      border: solid 2px #79663b;
      width: 20%;
    }

    #leftPane {
      margin: 3px;
      padding: 5px;
      width: 260px;
      color: #3C1700;
      background-color: white;
      border: solid 4px black;
    }

    #map {
      margin: 5px;
      border: solid 4px black;
    }

    .shadow {
      -o-border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      box-shadow: 8px 8px 16px #323834;
      -webkit-box-shadow: 8px 8px 16px #323834;
      -moz-box-shadow: 8px 8px 16px #323834;
      -o-box-shadow: 8px 8px 16px #323834;
    }

    .nihilo .dijitAccordionText {
      margin-left: 4px;
      margin-right: 4px;
      color: #5c8503;
    }

    #BasemapToggle {
      position: absolute;
      top: 12px;
      right: 15px;
      z-index: 50;
    }

    #HomeButton {
      position: absolute;
      top: 90px;
      left: 20px;
      z-index: 50;
    }

    #LocateButton {
      position: absolute;
      top: 130px;
      left: 20px;
      z-index: 50;
    }

    #bookmarks {
      width: 245px;
      z-index: 50;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid gray;
    }

    #search {
      position: absolute;
      top: 20px;
      left: 60px;
      z-index: 50;
    }

    #info {
      color: white;
      font: bold 16px/16px Helvetica, Sans-Serif;
      letter-spacing: -1px;
      background: rgb(0, 0, 0);
      background: rgba(0, 0, 0, 0.7);
    }

    #info2 {
      color: white;
      font: bold 16px/16px Helvetica, Sans-Serif;
      letter-spacing: -1px;
      background: #333333;
      padding-top: 10px;
      padding-right: 3px;
    }

    #LayersProps {
      text-align: right;
    }

    #titlePane {
      width: 200px;
    }

    #grid {
      border: 0px;
      width: 100%;
      height: 200px;
    }

    #grid { height: 100%; }
    .dgrid { border: none; }
    .field-id { cursor: pointer; }
  </style>

  <title> by Jaykapalczynski</title>
  <script type='text/javascript'>
    require([
      "esri/map", "esri/tasks/query", "esri/tasks/QueryTask", "esri/geometry/webMercatorUtils", "dojo/dom", "dojo/on", "esri/layers/FeatureLayer",
      "esri/dijit/Legend", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol", "esri/layers/LabelClass",
      "esri/dijit/BasemapToggle", "esri/dijit/HomeButton", "esri/dijit/Search", "esri/dijit/LocateButton", "esri/layers/GraphicsLayer", "esri/InfoTemplate",
      "esri/Color", "dojo/_base/array", "dojo/parser", "esri/renderers/ClassBreaksRenderer", "dijit/form/CheckBox", "dojo/dom-construct",
      "dojo/keys", "esri/SnappingManager", "esri/dijit/Measurement", "esri/tasks/GeometryService", "esri/config", "esri/sniff", "esri/dijit/BasemapGallery",
      "esri/dijit/Bookmarks", "esri/layers/OpenStreetMapLayer", "esri/dijit/OverviewMap", "dojo/_base/declare", "dgrid/Selection",
      "dgrid/OnDemandGrid", "dojo/store/Memory", "dgrid/Keyboard", "esri/layers/LabelLayer", "esri/symbols/TextSymbol", "esri/symbols/Font",
      "esri/symbols/SimpleLineSymbol", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer","dijit/TitlePane",
      "dojo/domReady!"
    ], function(
      Map, Query, QueryTask, webMercatorUtils, dom, on, FeatureLayer,
      Legend, SimpleFillSymbol, SimpleRenderer, SimpleMarkerSymbol, LabelClass,
      BasemapToggle, HomeButton, Search, LocateButton, GraphicsLayer, InfoTemplate,
      Color, arrayUtils, parser, ClassBreaksRenderer, CheckBox, domConstruct,
      keys, SnappingManager, Measurement, GeometryService, esriConfig, has, BasemapGallery,
      Bookmarks, OpenStreetMapLayer, OverviewMap, declare, Selection,
      Grid, Memory, Keyboard, LabelLayer, TextSymbol, Font,
      SimpleLineSymbol
    ) {

      //VARIABLES
      var legendLayers = [];
      var openStreetMapLayer;
      var grid;

      parser.parse();

      //=== GRID =========================================================================

      // create the dgrid
      window.grid = new(declare([Grid, Selection]))({
        // use Infinity so that all data is available in the grid
        bufferRows: Infinity,
        columns: {
          "id": "ID",
          "SITENAME": "Site Name",
          "COUNTY": "County",
          "CLASS": "Class",
          "LOCATION": "Location",
          "TYPE": "Type"
        }
      }, "grid");

      // add a click listener on the ID column
      window.grid.on(".field-id:click", selectCounty);

      //==================================================================================

      //SET THE MAP
      var map = new Map("map", {
        basemap: "dark-gray",
        center: [-79.665, 37.629],
        zoom: 8,
        logo: false,
        showLabels: true
      });

      var symbol = new SimpleMarkerSymbol({
        "color": [255, 255, 255, 64],
        "size": 12,
        "angle": -30,
        "xoffset": 0,
        "yoffset": 0,
        "type": "esriSMS",
        "style": "esriSMSCircle",
        "outline": {
          "color": [0, 0, 0, 255],
          "width": 1,
          "type": "esriSLS",
          "style": "esriSLSSolid"
        }
      });

      var highlightsymbol = new SimpleMarkerSymbol({
        "color": [255, 242, 0, 200],
        "size": 10,
        "angle": -30,
        "xoffset": 0,
        "yoffset": 0,
        "type": "esriSMS",
        "style": "esriSMSCircle",
        "outline": {
          "color": [255, 242, 0, 255],
          "width": 1,
          "type": "esriSLS",
          "style": "esriSLSSolid"
        }
      });

      var countiesGraphicsLayer = new GraphicsLayer();

      //This is the click event for the graphics on the map
      countiesGraphicsLayer.on("click", selectGrid);
      map.addLayer(countiesGraphicsLayer);

      //Set all the graphics to the standard symbol when the popup is closed
      map.infoWindow.on("hide", function(){
        if(countiesGraphicsLayer.graphics && countiesGraphicsLayer.graphics.length > 0){
          //Reset all graphics to standard symbol
          arrayUtils.map(countiesGraphicsLayer.graphics, function(gra) {
            gra.setSymbol(symbol);
          });
        }
      });

      // change cursor to indicate features are click-able
      countiesGraphicsLayer.on("mouse-over", function() {
        map.setMapCursor("pointer");
      });
      countiesGraphicsLayer.on("mouse-out", function() {
        map.setMapCursor("default");
      });

      // QUERY FOR County and Squad
      var queryTask = new QueryTask("https://vafwis.dgif.virginia.gov/arcgis/rest/services/Public/BoatingAccessSites/FeatureServer/0");
      var query = new Query();
      query.outSpatialReference = {
        wkid: 4326
      };
      query.returnGeometry = true;
      query.outFields = ["OBJECTID", "SITENAME", "COUNTY", "CLASS", "LOCATION", "TYPE"];

      var infoTemplate = new InfoTemplate();
      var content = "<b>Site: </b>${SITENAME}<br/>" +
        "<b>County: </b>${COUNTY}<br/>" +
        "<b>Class: </b>${CLASS}<br/>" +
        "<b>Location: </b>${LOCATION}<br/>" +
        "<b>Type: </b>${TYPE}<br/>"
      infoTemplate.setTitle("${COUNTY}");
      infoTemplate.setContent(content);

      //=======================================================================================================================
      on(dom.byId("executeCountySquad"), "click", executeCountySquad);

      function executeCountySquad() {
        var test = document.getElementById("COUNTY").value
        query.where = "COUNTY LIKE '" + (dom.byId("COUNTY").value) + "%' AND SITENAME like '" + (dom.byId("SITENAME").value) + "%' ";
        queryTask.execute(query, showResultsCountySquad);
      }

      function showResultsCountySquad(results) {
        countiesGraphicsLayer.clear();

        var resultItems = [];
        arrayUtils.map(results.features, function(feature) {
          feature.setSymbol(symbol);
          feature.setInfoTemplate(infoTemplate);
          countiesGraphicsLayer.add(feature);
          var featureAttributes = feature.attributes;
          for (var attr in featureAttributes) {
            resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
          }
          resultItems.push("<br>");
        });
        dom.byId("inforesultsCountySquad").innerHTML = resultItems.join("");

        var data = arrayUtils.map(results.features, function(feature) {
          return {
            "id": feature.attributes.OBJECTID,
            "SITENAME": feature.attributes.SITENAME,
            "COUNTY": feature.attributes.COUNTY,
            "CLASS": feature.attributes.CLASS,
            "LOCATION": feature.attributes.LOCATION,
            "TYPE": feature.attributes.TYPE
          };
        });

        var memStore = new Memory({
          data: data
        });
        window.grid.set("store", memStore);
      }

      //fires when grid row is selected
      function selectCounty(e){
        var id = parseInt(e.target.innerHTML, 10);
        arrayUtils.map(countiesGraphicsLayer.graphics, function(gra) {
          if(gra.attributes.OBJECTID === id){
            gra.setSymbol(highlightsymbol);
            map.infoWindow.setFeatures([gra]);
            map.infoWindow.show(gra.geometry);
          }else{
            //if this is not the selected graphic then set it's symbol to the standard one
            gra.setSymbol(symbol);
          }
        });
      }

      // fires when a feature on the map is clicked
      function selectGrid(e) {
        //Reset all graphics to standard symbol
        arrayUtils.map(countiesGraphicsLayer.graphics, function(gra) {
          gra.setSymbol(symbol);
        });

        var id = e.graphic.attributes.OBJECTID;

        e.graphic.setSymbol(highlightsymbol);

        // select the corresponding row in the grid
        // and make sure it is in view
        window.grid.clearSelection();
        window.grid.select(id);
        window.grid.row(id).element.scrollIntoView();
      }

    });
  </script>
</head>

<body>
  <body class="nihilo">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      </div>
      <div id="navigation" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" class="shadow" id="leftPane">
        <div data-dojo-type="dijit/layout/AccordionContainer" style="color:black;">
          <!-- 1st PANEL -->
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Queries'" style="color:red;">
            <div data-dojo-type="dijit/layout/AccordionContainer" style="color:black;">
              <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'County / Squad'">
                <div>
                  <input type="text" id="COUNTY" value="A">
                  <br>
                  <input type="text" id="SITENAME" value="">
                  <br>
                  <input id="executeCountySquad" type="button" value="Get Details County Squad">
                  <br>
                  <div id="inforesultsCountySquad" style="padding:5px; font-size:8px; height:Auto; margin:5px; background-color:#eee;">Results:</div>
                  <br>
                </div>
              </div>
            </div>
          </div>
          <!-- 2nd PANEL -->
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Layers'">
          </div>
          <!-- 3rd PANEL -->
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend'" style="color:black;">
          </div>
          <!-- 4th PANEL -->
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tools'" style="padding:10px 0; color:Black; text-align: center;">
          </div>
        </div>
      </div>
      <div>
        <div id="map" class="shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
        </div>
      </div>
      <div id="footer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
        <div id="grid" style="height:100%; color:red;"></div>
      </div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

ThomasSolow · ‎03-31-2017

You may be able to use a feature layer for this and overwrite the renderer on the feature layer so that it returns whatever symbol you want.

If there is some other reason you need to use a graphics layer then you may have to search through the list of graphics added to the map manually based on some unique key rather than using queryFeatures. I'm not sure how to programmatically select something in 3.XX so I can't comment on that.

I think map.graphics will have a list of graphics added to the base graphics layer and you should be able to search that list based on the unique key that you used in your table.

jaykapalczynski · ‎03-31-2017

The query task example shows graphics layer being created...not sure how to create a feature layer and do as you stated.

ThomasSolow · ‎03-31-2017

Could you link to the sample please?

RobertScheitlin__GISP · ‎04-01-2017

This is a follow-up for this thread: https://community.esri.com/thread/192648-return-results-options

Jay,

Here is how you would do it for your sample code (I have comments in the code):

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.20/dijit/themes/nihilo/nihilo.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dojo/resources/dojo.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dgrid/css/skins/nihilo.css">
  <script type="text/javascript" src="https://js.arcgis.com/3.20"></script>

  <style type="text/css">
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: white;
      overflow: hidden;
      font-family: "Kimberley", sans-serif
    }

    #header {
      -moz-border-radius: 5px;
      margin: 1px;
      padding-top: 10px;
      padding-left: 10px;
      background-color: Black;
      color: white;
      font-size: 18pt;
      text-align: left;
      font-weight: bold;
      border: solid 0px black;
      height: 65px;
    }

    .banner {
      font-size: 0pt;
      padding-right: 20px;
    }

    .banner1 {
      font-size: 10pt;
    }

    .banner2 {
      font-size: 18pt;
      font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
      padding-top: 8px;
    }

    .bannerN {
      padding-top: 2px;
      padding-right: 0px;
    }

    #navigation {
      -moz-border-radius: 5px;
      margin: 1px;
      padding-top: 7px;
      padding-right: 8px;
      background-color: #333333;
      color: white;
      font-size: 10pt;
      text-align: right;
      border: solid 0px black;
      height: 20px;
    }

    #footer {
      /*margin: 2px;*/
      /*padding-right: 10px;*/
      /*background-color: black;*/
      color: white;
      border: solid 2px black;
      font-size: 10pt;
      text-align: right;
      height: 250px;
      padding-top: 5px;
    }

    #rightPane {
      margin: 3px;
      padding: 10px;
      background-color: white;
      color: #421b14;
      border: solid 2px #79663b;
      width: 20%;
    }

    #leftPane {
      margin: 3px;
      padding: 5px;
      width: 260px;
      color: #3C1700;
      background-color: white;
      border: solid 4px black;
    }

    #map {
      margin: 5px;
      border: solid 4px black;
    }

    .shadow {
      -o-border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      box-shadow: 8px 8px 16px #323834;
      -webkit-box-shadow: 8px 8px 16px #323834;
      -moz-box-shadow: 8px 8px 16px #323834;
      -o-box-shadow: 8px 8px 16px #323834;
    }

    .nihilo .dijitAccordionText {
      margin-left: 4px;
      margin-right: 4px;
      color: #5c8503;
    }

    #BasemapToggle {
      position: absolute;
      top: 12px;
      right: 15px;
      z-index: 50;
    }

    #HomeButton {
      position: absolute;
      top: 90px;
      left: 20px;
      z-index: 50;
    }

    #LocateButton {
      position: absolute;
      top: 130px;
      left: 20px;
      z-index: 50;
    }

    #bookmarks {
      width: 245px;
      z-index: 50;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid gray;
    }

    #search {
      position: absolute;
      top: 20px;
      left: 60px;
      z-index: 50;
    }

    #info {
      color: white;
      font: bold 16px/16px Helvetica, Sans-Serif;
      letter-spacing: -1px;
      background: rgb(0, 0, 0);
      background: rgba(0, 0, 0, 0.7);
    }

    #info2 {
      color: white;
      font: bold 16px/16px Helvetica, Sans-Serif;
      letter-spacing: -1px;
      background: #333333;
      padding-top: 10px;
      padding-right: 3px;
    }

    #LayersProps {
      text-align: right;
    }

    #titlePane {
      width: 200px;
    }

    #grid {
      border: 0px;
      width: 100%;
      height: 200px;
    }

    #grid { height: 100%; }
    .dgrid { border: none; }
    .field-id { cursor: pointer; }
  </style>

  <title> by Jaykapalczynski</title>
  <script type='text/javascript'>
    require([
      "esri/map", "esri/tasks/query", "esri/tasks/QueryTask", "esri/geometry/webMercatorUtils", "dojo/dom", "dojo/on", "esri/layers/FeatureLayer",
      "esri/dijit/Legend", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol", "esri/layers/LabelClass",
      "esri/dijit/BasemapToggle", "esri/dijit/HomeButton", "esri/dijit/Search", "esri/dijit/LocateButton", "esri/layers/GraphicsLayer", "esri/InfoTemplate",
      "esri/Color", "dojo/_base/array", "dojo/parser", "esri/renderers/ClassBreaksRenderer", "dijit/form/CheckBox", "dojo/dom-construct",
      "dojo/keys", "esri/SnappingManager", "esri/dijit/Measurement", "esri/tasks/GeometryService", "esri/config", "esri/sniff", "esri/dijit/BasemapGallery",
      "esri/dijit/Bookmarks", "esri/layers/OpenStreetMapLayer", "esri/dijit/OverviewMap", "dojo/_base/declare", "dgrid/Selection",
      "dgrid/OnDemandGrid", "dojo/store/Memory", "dgrid/Keyboard", "esri/layers/LabelLayer", "esri/symbols/TextSymbol", "esri/symbols/Font",
      "esri/symbols/SimpleLineSymbol", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer","dijit/TitlePane",
      "dojo/domReady!"
    ], function(
      Map, Query, QueryTask, webMercatorUtils, dom, on, FeatureLayer,
      Legend, SimpleFillSymbol, SimpleRenderer, SimpleMarkerSymbol, LabelClass,
      BasemapToggle, HomeButton, Search, LocateButton, GraphicsLayer, InfoTemplate,
      Color, arrayUtils, parser, ClassBreaksRenderer, CheckBox, domConstruct,
      keys, SnappingManager, Measurement, GeometryService, esriConfig, has, BasemapGallery,
      Bookmarks, OpenStreetMapLayer, OverviewMap, declare, Selection,
      Grid, Memory, Keyboard, LabelLayer, TextSymbol, Font,
      SimpleLineSymbol
    ) {

      //VARIABLES
      var legendLayers = [];
      var openStreetMapLayer;
      var grid;

      parser.parse();

      //=== GRID =========================================================================

      // create the dgrid
      window.grid = new(declare([Grid, Selection]))({
        // use Infinity so that all data is available in the grid
        bufferRows: Infinity,
        columns: {
          "id": "ID",
          "SITENAME": "Site Name",
          "COUNTY": "County",
          "CLASS": "Class",
          "LOCATION": "Location",
          "TYPE": "Type"
        }
      }, "grid");

      // add a click listener on the ID column
      window.grid.on(".field-id:click", selectCounty);

      //==================================================================================

      //SET THE MAP
      var map = new Map("map", {
        basemap: "dark-gray",
        center: [-79.665, 37.629],
        zoom: 8,
        logo: false,
        showLabels: true
      });

      var symbol = new SimpleMarkerSymbol({
        "color": [255, 255, 255, 64],
        "size": 12,
        "angle": -30,
        "xoffset": 0,
        "yoffset": 0,
        "type": "esriSMS",
        "style": "esriSMSCircle",
        "outline": {
          "color": [0, 0, 0, 255],
          "width": 1,
          "type": "esriSLS",
          "style": "esriSLSSolid"
        }
      });

      var highlightsymbol = new SimpleMarkerSymbol({
        "color": [255, 242, 0, 200],
        "size": 10,
        "angle": -30,
        "xoffset": 0,
        "yoffset": 0,
        "type": "esriSMS",
        "style": "esriSMSCircle",
        "outline": {
          "color": [255, 242, 0, 255],
          "width": 1,
          "type": "esriSLS",
          "style": "esriSLSSolid"
        }
      });

      var countiesGraphicsLayer = new GraphicsLayer();

      //This is the click event for the graphics on the map
      countiesGraphicsLayer.on("click", selectGrid);
      map.addLayer(countiesGraphicsLayer);

      //Set all the graphics to the standard symbol when the popup is closed
      map.infoWindow.on("hide", function(){
        if(countiesGraphicsLayer.graphics && countiesGraphicsLayer.graphics.length > 0){
          //Reset all graphics to standard symbol
          arrayUtils.map(countiesGraphicsLayer.graphics, function(gra) {
            gra.setSymbol(symbol);
          });
        }
      });

      // change cursor to indicate features are click-able
      countiesGraphicsLayer.on("mouse-over", function() {
        map.setMapCursor("pointer");
      });
      countiesGraphicsLayer.on("mouse-out", function() {
        map.setMapCursor("default");
      });

      // QUERY FOR County and Squad
      var queryTask = new QueryTask("https://vafwis.dgif.virginia.gov/arcgis/rest/services/Public/BoatingAccessSites/FeatureServer/0");
      var query = new Query();
      query.outSpatialReference = {
        wkid: 4326
      };
      query.returnGeometry = true;
      query.outFields = ["OBJECTID", "SITENAME", "COUNTY", "CLASS", "LOCATION", "TYPE"];

      var infoTemplate = new InfoTemplate();
      var content = "<b>Site: </b>${SITENAME}<br/>" +
        "<b>County: </b>${COUNTY}<br/>" +
        "<b>Class: </b>${CLASS}<br/>" +
        "<b>Location: </b>${LOCATION}<br/>" +
        "<b>Type: </b>${TYPE}<br/>"
      infoTemplate.setTitle("${COUNTY}");
      infoTemplate.setContent(content);

      //=======================================================================================================================
      on(dom.byId("executeCountySquad"), "click", executeCountySquad);

      function executeCountySquad() {
        var test = document.getElementById("COUNTY").value
        query.where = "COUNTY LIKE '" + (dom.byId("COUNTY").value) + "%' AND SITENAME like '" + (dom.byId("SITENAME").value) + "%' ";
        queryTask.execute(query, showResultsCountySquad);
      }

      function showResultsCountySquad(results) {
        countiesGraphicsLayer.clear();

        var resultItems = [];
        arrayUtils.map(results.features, function(feature) {
          feature.setSymbol(symbol);
          feature.setInfoTemplate(infoTemplate);
          countiesGraphicsLayer.add(feature);
          var featureAttributes = feature.attributes;
          for (var attr in featureAttributes) {
            resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
          }
          resultItems.push("<br>");
        });
        dom.byId("inforesultsCountySquad").innerHTML = resultItems.join("");

        var data = arrayUtils.map(results.features, function(feature) {
          return {
            "id": feature.attributes.OBJECTID,
            "SITENAME": feature.attributes.SITENAME,
            "COUNTY": feature.attributes.COUNTY,
            "CLASS": feature.attributes.CLASS,
            "LOCATION": feature.attributes.LOCATION,
            "TYPE": feature.attributes.TYPE
          };
        });

        var memStore = new Memory({
          data: data
        });
        window.grid.set("store", memStore);
      }

      //fires when grid row is selected
      function selectCounty(e){
        var id = parseInt(e.target.innerHTML, 10);
        arrayUtils.map(countiesGraphicsLayer.graphics, function(gra) {
          if(gra.attributes.OBJECTID === id){
            gra.setSymbol(highlightsymbol);
            map.infoWindow.setFeatures([gra]);
            map.infoWindow.show(gra.geometry);
          }else{
            //if this is not the selected graphic then set it's symbol to the standard one
            gra.setSymbol(symbol);
          }
        });
      }

      // fires when a feature on the map is clicked
      function selectGrid(e) {
        //Reset all graphics to standard symbol
        arrayUtils.map(countiesGraphicsLayer.graphics, function(gra) {
          gra.setSymbol(symbol);
        });

        var id = e.graphic.attributes.OBJECTID;

        e.graphic.setSymbol(highlightsymbol);

        // select the corresponding row in the grid
        // and make sure it is in view
        window.grid.clearSelection();
        window.grid.select(id);
        window.grid.row(id).element.scrollIntoView();
      }

    });
  </script>
</head>

<body>
  <body class="nihilo">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      </div>
      <div id="navigation" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" class="shadow" id="leftPane">
        <div data-dojo-type="dijit/layout/AccordionContainer" style="color:black;">
          <!-- 1st PANEL -->
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Queries'" style="color:red;">
            <div data-dojo-type="dijit/layout/AccordionContainer" style="color:black;">
              <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'County / Squad'">
                <div>
                  <input type="text" id="COUNTY" value="A">
                  <br>
                  <input type="text" id="SITENAME" value="">
                  <br>
                  <input id="executeCountySquad" type="button" value="Get Details County Squad">
                  <br>
                  <div id="inforesultsCountySquad" style="padding:5px; font-size:8px; height:Auto; margin:5px; background-color:#eee;">Results:</div>
                  <br>
                </div>
              </div>
            </div>
          </div>
          <!-- 2nd PANEL -->
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Layers'">
          </div>
          <!-- 3rd PANEL -->
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend'" style="color:black;">
          </div>
          <!-- 4th PANEL -->
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tools'" style="padding:10px 0; color:Black; text-align: center;">
          </div>
        </div>
      </div>
      <div>
        <div id="map" class="shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
        </div>
      </div>
      <div id="footer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
        <div id="grid" style="height:100%; color:red;"></div>
      </div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍