AnsweredAssumed Answered

Highlighting a point feature based on a query without overriding style

Question asked by bgfield on Jan 8, 2014
Latest reply on Jan 8, 2014 by bgfield
I'm creating a simple map filled with point features of businesses.  Users can click on a point to get information on it, or click on the name of the business in a dGrid which fires a query and selects the appropriate feature.  If a user clicks a point on the map, the default light-blue box with tick marks surrounds the feature to highlight it.  If they click a business name, no highlight graphic is applied.  I got around this issue by setting a selection symbol; however, now if a user clicks a point on the map, both the default box with tick marks AND the selection symbol is added to the map; and if you click an item in the dGrid, only the highlight symbol is applied and it overrides the default style of the feature (which is a problem as the points are colored differently).  If I set the opacity of the fill-color to 0, only the light-blue outline shows up - no fill color at all (not even the fill color of the actual feature).  Try my code below to see an example of what's happening.

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>True Blue Program Participants</title>    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojo/resources/dojo.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/dgrid.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/skins/tundra.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">   <style>     html, body {        height: 100%;        width: 100%;        margin: 0;        padding: 0;        overflow: hidden;     }  td  {  padding:3px;  }     #BasemapToggle {       position: fixed;       top: 3%;       right: 20px;       z-index: 50;     }      #container {        height: 100%;        visibility: hidden;     }     #bottomPane { height: 200px; }     #grid { height: 100%; }     .dgrid { border: none; }  .dgrid-column-Email {    width: 26%;  }  .dgrid-column-MaxSize {    width: 6%;  }  .dgrid-column-Phone {    width: 6%;  }     td.field-id { cursor: pointer;     text-decoration:underline;    color:blue;  }   </style>    <script src="http://js.arcgis.com/3.7/"></script>   <script>     require([       "dojo/ready",       "dgrid/OnDemandGrid",       "dgrid/Selection",        "dojo/store/Memory",        "dojo/_base/array",       "dojo/dom-style",       "dijit/registry",       "esri/map",        "esri/layers/FeatureLayer",    "esri/dijit/Legend",       "esri/tasks/QueryTask",       "esri/tasks/query",    "esri/dijit/BasemapToggle",       "dojo/_base/declare",        "dojo/number",        "dojo/on",        "dojo/parser",        "dijit/layout/BorderContainer",        "dijit/layout/ContentPane"       ], function(         ready,         Grid,          Selection,          Memory,          array,         domStyle,         registry,         Map,         FeatureLayer,         Legend,         QueryTask,         Query,   BasemapToggle,         declare,          dojoNum,          on,          parser       )   {         ready(function() {            parser.parse();            // create the dgrid           window.grid = new (declare([Grid, Selection]))({             bufferRows: Infinity,             columns: {               "id": "Business Name",               "Address": "Address",      "City": "City",      "State": "State",      "Zip": "Zip Code",      "Type": "Business Type"             }           }, "grid");            grid.on(".field-id:click", selectParticipant);            window.map = new Map("map", {             basemap: "streets",             center: [-76.5, 38.9],             zoom: 8           });          var toggle = new BasemapToggle({    map: map,    basemap: "satellite"     }, "BasemapToggle");     toggle.startup();                window.trueblueUrl = "http://services.arcgis.com/njFNhDsUCentVYJW/arcgis/rest/services/TrueBlueMap/FeatureServer/0";           window.outFields = ["Business_N", "Address", "City_1", "State", "Zip", "Type"];                var infoTemplate = new esri.InfoTemplate();           infoTemplate.setTitle("${Business_N}");     infoTemplate.setContent( "<table border='0', width='100%'>"          + "<tr><td width='50%' width='100%' valign='top'>Address:</td><td width='50%' valign='bottom'> ${Address}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>City:</td><td width='50%' valign='bottom'> ${City_1}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>State:</td><td width='50%' valign='bottom'> ${State}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Zip:</td><td width='50%' valign='bottom'> ${Zip}</td></tr>"          + "<tr><td width='50%' width='100%' valign='top'>Business Type:</td><td width='50%' valign='bottom'> ${Type}</td></tr>"          + "</table>"     );                   map.infoWindow.resize(425,150);          var highlight = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,255,255]), 3), new dojo.Color([50,50,255,1]));                     var fl = new FeatureLayer(window.trueblueUrl, {             id: "participants",             mode: esri.layers.FeatureLayer.MODE_ONDEMAND,             outFields: window.outFields,    infoTemplate: infoTemplate           });          fl.setSelectionSymbol(highlight);          fl.on("click", function(e) {       fl.clearSelection();    map.graphics.clear();    map.graphics.add(new esri.Graphic(e.graphic.geometry, highlight));    grid.clearSelection();     });            fl.on("mouse-over", function() {             map.setMapCursor("pointer");           });           fl.on("mouse-out", function() {             map.setMapCursor("default");           });      dojo.connect(map.infoWindow, "onHide", function() {    map.graphics.clear();    });                 map.addLayers([fl]);               map.on("load", function( evt ){             domStyle.set(registry.byId("container").domNode, "visibility", "visible");             populateGrid(Memory);           });            function populateGrid(Memory) {             var qt = new QueryTask(window.trueblueUrl);             var query = new Query();    bType = document.getElementById("businessFilter").value;             query.where = "Type LIKE '%" + bType + "%'";             query.returnGeometry = false;             query.outFields = window.outFields;             qt.execute(query, function(results) {               var data = array.map(results.features, function(feature) {                 return {                   "id": feature.attributes[window.outFields[0]],                   "Address": feature.attributes[window.outFields[1]],       "City": feature.attributes[window.outFields[2]],       "State": feature.attributes[window.outFields[3]],       "Zip": feature.attributes[window.outFields[4]],       "Type": feature.attributes[window.outFields[5]]                 }               });               var memStore = new Memory({ data: data });               window.grid.set("store", memStore);             });           }           // fires when a row in the dgrid is clicked           function selectParticipant(e) {       map.infoWindow.hide();             var fl = map.getLayer("participants");             var query = new Query();             businessName = (e.target.innerHTML);    query.where = "Business_N = " + "'" + businessName.replace("'", "''") + "'";               fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) {               map.centerAt(result[0].geometry);      result[0].getDojoShape().moveToFront();             });             }       document.getElementById("businessFilter").onchange = function (businessTypeQuery) {       businessType = document.getElementById("businessFilter").value;    fl.setDefinitionExpression("Type LIKE'%" + businessType + "%'")    populateGrid(Memory);    map.graphics.clear();     };             }       );     });   </script> </head>  <body class="tundra">   <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false, design: 'sidebar', liveSplitters:true">     <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center', splitter:true" style="z-index:2">    <span id="BasemapToggle"></span>    <span id="Filter" style="position:fixed; left:4.5%; top:2.1%; background-color:#FFFFFF; border:2px solid #666666; border-radius:6px; font-size:18px"><table id="filterTable", border='0', width='100%'><tr><td>Sort by:</td><td><select id='businessFilter' onchange="businessTypeQuery(this.value)"><option value='''>All Business Types</option><option value='Carry Out'>Carry Out</option><option value='Caterer'>Caterer</option><option value='Distributor'>Distributor</option><option value='Food Truck'>Food Truck</option><option value='Institutional'>Institutional</option><option value='Restaurant'>Restaurant</option><option value='Retail'>Retail</option><option value='Wholesale'>Wholesale</option></td></tr></table></span>  </div>     <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom', splitter:true"> <div id="grid"></div>     </div>   </div> </body> </html>



Ultimately I'd like to have the same selection symbol applied whether a user clicks a point on the map or selects an item from the dGrid.  And I definitely just want a highlight around the point - I'd like the fill color of the original feature to remain even when selected.  I'm sure this is something simple, but I'm not finding it!

Outcomes