topic Re: Highlighting a point feature based on a query without overriding style in ArcGIS JavaScript Maps SDK Questions https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/highlighting-a-point-feature-based-on-a-query/m-p/639559#M59719 <HTML><HEAD></HEAD><BODY><SPAN>Thanks - that totally solved my issue.</SPAN></BODY></HTML> Wed, 08 Jan 2014 20:11:32 GMT BrettGreenfield__DNR_ 2014-01-08T20:11:32Z Highlighting a point feature based on a query without overriding style https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/highlighting-a-point-feature-based-on-a-query/m-p/639557#M59717 <HTML><HEAD></HEAD><BODY><SPAN>I'm creating a simple map filled with point features of businesses.&nbsp; 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.&nbsp; If a user clicks a point on the map, the default light-blue box with tick marks surrounds the feature to highlight it.&nbsp; If they click a business name, no highlight graphic is applied.&nbsp; 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).&nbsp; 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).&nbsp; Try my code below to see an example of what's happening.</SPAN><BR /><BR /><PRE class="plain" name="code">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &nbsp; &lt;meta charset="utf-8"&gt; &nbsp; &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"&gt; &nbsp; &lt;title&gt;True Blue Program Participants&lt;/title&gt;&nbsp; &nbsp; &lt;link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojo/resources/dojo.css"&gt; &nbsp; &lt;link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/dgrid.css"&gt; &nbsp; &lt;link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/skins/tundra.css"&gt; &nbsp; &lt;link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css"&gt; &nbsp; &lt;link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"&gt; &nbsp; &lt;style&gt; &nbsp;&nbsp;&nbsp; html, body {&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 100%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 100%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; overflow: hidden; &nbsp;&nbsp;&nbsp; }&nbsp; td&nbsp; {&nbsp; padding:3px;&nbsp; } &nbsp;&nbsp;&nbsp; #BasemapToggle { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: fixed; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top: 3%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; right: 20px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; z-index: 50; &nbsp;&nbsp;&nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; #container {&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 100%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; visibility: hidden; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; #bottomPane { height: 200px; } &nbsp;&nbsp;&nbsp; #grid { height: 100%; } &nbsp;&nbsp;&nbsp; .dgrid { border: none; }&nbsp; .dgrid-column-Email { &nbsp;&nbsp; width: 26%;&nbsp; }&nbsp; .dgrid-column-MaxSize { &nbsp;&nbsp; width: 6%;&nbsp; }&nbsp; .dgrid-column-Phone { &nbsp;&nbsp; width: 6%;&nbsp; } &nbsp;&nbsp;&nbsp; td.field-id { cursor: pointer;&nbsp; &nbsp;&nbsp; text-decoration:underline; &nbsp;&nbsp; color:blue;&nbsp; } &nbsp; &lt;/style&gt;&nbsp; &nbsp; &lt;script src="http://js.arcgis.com/3.7/"&gt;&lt;/script&gt; &nbsp; &lt;script&gt; &nbsp;&nbsp;&nbsp; require([ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dojo/ready", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dgrid/OnDemandGrid", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dgrid/Selection",&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dojo/store/Memory",&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dojo/_base/array", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dojo/dom-style", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dijit/registry", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "esri/map",&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "esri/layers/FeatureLayer", &nbsp;&nbsp; "esri/dijit/Legend", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "esri/tasks/QueryTask", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "esri/tasks/query", &nbsp;&nbsp; "esri/dijit/BasemapToggle", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dojo/_base/declare",&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dojo/number",&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dojo/on",&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dojo/parser",&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dijit/layout/BorderContainer",&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "dijit/layout/ContentPane" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ], function( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ready, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Grid,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Selection,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Memory,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; array, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domStyle, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; registry, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Map, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FeatureLayer, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Legend, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; QueryTask, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Query, &nbsp; BasemapToggle, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; declare,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojoNum,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; on,&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; parser &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ) &nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ready(function() {&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; parser.parse();&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // create the dgrid &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.grid = new (declare([Grid, Selection]))({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bufferRows: Infinity, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; columns: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "id": "Business Name", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Address": "Address", &nbsp;&nbsp;&nbsp;&nbsp; "City": "City", &nbsp;&nbsp;&nbsp;&nbsp; "State": "State", &nbsp;&nbsp;&nbsp;&nbsp; "Zip": "Zip Code", &nbsp;&nbsp;&nbsp;&nbsp; "Type": "Business Type" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, "grid");&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; grid.on(".field-id:click", selectParticipant);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.map = new Map("map", { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; basemap: "streets", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; center: [-76.5, 38.9], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoom: 8 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var toggle = new BasemapToggle({ &nbsp;&nbsp; map: map, &nbsp;&nbsp; basemap: "satellite" &nbsp;&nbsp;&nbsp; }, "BasemapToggle"); &nbsp;&nbsp;&nbsp; toggle.startup();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.trueblueUrl = "http://services.arcgis.com/njFNhDsUCentVYJW/arcgis/rest/services/TrueBlueMap/FeatureServer/0"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.outFields = ["Business_N", "Address", "City_1", "State", "Zip", "Type"]; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var infoTemplate = new esri.InfoTemplate(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; infoTemplate.setTitle("${Business_N}"); &nbsp;&nbsp;&nbsp; infoTemplate.setContent( "&lt;table border='0', width='100%'&gt;" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + "&lt;tr&gt;&lt;td width='50%' width='100%' valign='top'&gt;Address:&lt;/td&gt;&lt;td width='50%' valign='bottom'&gt; ${Address}&lt;/td&gt;&lt;/tr&gt;" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + "&lt;tr&gt;&lt;td width='50%' width='100%' valign='top'&gt;City:&lt;/td&gt;&lt;td width='50%' valign='bottom'&gt; ${City_1}&lt;/td&gt;&lt;/tr&gt;" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + "&lt;tr&gt;&lt;td width='50%' width='100%' valign='top'&gt;State:&lt;/td&gt;&lt;td width='50%' valign='bottom'&gt; ${State}&lt;/td&gt;&lt;/tr&gt;" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + "&lt;tr&gt;&lt;td width='50%' width='100%' valign='top'&gt;Zip:&lt;/td&gt;&lt;td width='50%' valign='bottom'&gt; ${Zip}&lt;/td&gt;&lt;/tr&gt;" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + "&lt;tr&gt;&lt;td width='50%' width='100%' valign='top'&gt;Business Type:&lt;/td&gt;&lt;td width='50%' valign='bottom'&gt; ${Type}&lt;/td&gt;&lt;/tr&gt;" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + "&lt;/table&gt;" &nbsp;&nbsp;&nbsp; ); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; map.infoWindow.resize(425,150); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 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])); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var fl = new FeatureLayer(window.trueblueUrl, { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id: "participants", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mode: esri.layers.FeatureLayer.MODE_ONDEMAND, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outFields: window.outFields, &nbsp;&nbsp; infoTemplate: infoTemplate &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fl.setSelectionSymbol(highlight); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fl.on("click", function(e) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fl.clearSelection(); &nbsp;&nbsp; map.graphics.clear(); &nbsp;&nbsp; map.graphics.add(new esri.Graphic(e.graphic.geometry, highlight)); &nbsp;&nbsp; grid.clearSelection(); &nbsp;&nbsp;&nbsp; });&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fl.on("mouse-over", function() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.setMapCursor("pointer"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fl.on("mouse-out", function() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.setMapCursor("default"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; dojo.connect(map.infoWindow, "onHide", function() { &nbsp;&nbsp; map.graphics.clear(); &nbsp;&nbsp; });&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.addLayers([fl]);&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.on("load", function( evt ){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domStyle.set(registry.byId("container").domNode, "visibility", "visible"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; populateGrid(Memory); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function populateGrid(Memory) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var qt = new QueryTask(window.trueblueUrl); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var query = new Query(); &nbsp;&nbsp; bType = document.getElementById("businessFilter").value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; query.where = "Type LIKE '%" + bType + "%'"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; query.returnGeometry = false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; query.outFields = window.outFields; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; qt.execute(query, function(results) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var data = array.map(results.features, function(feature) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "id": feature.attributes[window.outFields[0]], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Address": feature.attributes[window.outFields[1]], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "City": feature.attributes[window.outFields[2]], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "State": feature.attributes[window.outFields[3]], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Zip": feature.attributes[window.outFields[4]], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Type": feature.attributes[window.outFields[5]] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var memStore = new Memory({ data: data }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.grid.set("store", memStore); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // fires when a row in the dgrid is clicked &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function selectParticipant(e) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.infoWindow.hide(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var fl = map.getLayer("participants"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var query = new Query(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; businessName = (e.target.innerHTML); &nbsp;&nbsp; query.where = "Business_N = " + "'" + businessName.replace("'", "''") + "'";&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.centerAt(result[0].geometry); &nbsp;&nbsp;&nbsp;&nbsp; result[0].getDojoShape().moveToFront(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; document.getElementById("businessFilter").onchange = function (businessTypeQuery) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; businessType = document.getElementById("businessFilter").value; &nbsp;&nbsp; fl.setDefinitionExpression("Type LIKE'%" + businessType + "%'") &nbsp;&nbsp; populateGrid(Memory); &nbsp;&nbsp; map.graphics.clear(); &nbsp;&nbsp;&nbsp; };&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ); &nbsp;&nbsp;&nbsp; }); &nbsp; &lt;/script&gt; &lt;/head&gt;&nbsp; &lt;body class="tundra"&gt; &nbsp; &lt;div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false, design: 'sidebar', liveSplitters:true"&gt; &nbsp;&nbsp;&nbsp; &lt;div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center', splitter:true" style="z-index:2"&gt; &nbsp;&nbsp; &lt;span id="BasemapToggle"&gt;&lt;/span&gt; &nbsp;&nbsp; &lt;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"&gt;&lt;table id="filterTable", border='0', width='100%'&gt;&lt;tr&gt;&lt;td&gt;Sort by:&lt;/td&gt;&lt;td&gt;&lt;select id='businessFilter' onchange="businessTypeQuery(this.value)"&gt;&lt;option value='''&gt;All Business Types&lt;/option&gt;&lt;option value='Carry Out'&gt;Carry Out&lt;/option&gt;&lt;option value='Caterer'&gt;Caterer&lt;/option&gt;&lt;option value='Distributor'&gt;Distributor&lt;/option&gt;&lt;option value='Food Truck'&gt;Food Truck&lt;/option&gt;&lt;option value='Institutional'&gt;Institutional&lt;/option&gt;&lt;option value='Restaurant'&gt;Restaurant&lt;/option&gt;&lt;option value='Retail'&gt;Retail&lt;/option&gt;&lt;option value='Wholesale'&gt;Wholesale&lt;/option&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/span&gt;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom', splitter:true"&gt; &lt;div id="grid"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</PRE><BR /><BR /><BR /><SPAN>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.&nbsp; 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.&nbsp; I'm sure this is something simple, but I'm not finding it!</SPAN></BODY></HTML> Wed, 08 Jan 2014 19:36:59 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/highlighting-a-point-feature-based-on-a-query/m-p/639557#M59717 BrettGreenfield__DNR_ 2014-01-08T19:36:59Z Re: Highlighting a point feature based on a query without overriding style https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/highlighting-a-point-feature-based-on-a-query/m-p/639558#M59718 <HTML><HEAD></HEAD><BODY><SPAN>When you set selectionSymbol, that means when the feature is selected, this symbol will 'replace' the original symbol, instead of overlay on top of it.</SPAN><BR /><SPAN>You need to create a new graphic with the same geometry and the hightlight symbol, and add it to the map.graphics layer to achieve the visual effect.</SPAN></BODY></HTML> Wed, 08 Jan 2014 19:44:48 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/highlighting-a-point-feature-based-on-a-query/m-p/639558#M59718 JianHuang 2014-01-08T19:44:48Z Re: Highlighting a point feature based on a query without overriding style https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/highlighting-a-point-feature-based-on-a-query/m-p/639559#M59719 <HTML><HEAD></HEAD><BODY><SPAN>Thanks - that totally solved my issue.</SPAN></BODY></HTML> Wed, 08 Jan 2014 20:11:32 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/highlighting-a-point-feature-based-on-a-query/m-p/639559#M59719 BrettGreenfield__DNR_ 2014-01-08T20:11:32Z