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!
