My goal is to display a complete feature layer of ~400 features with a default symbology when the map loads and then replace the symbology of a single polygon in that feature layer on a mouse hover event. Eventually, I'll want to be able to select that polygon and permanently alter the symbology while also changing the symbology of the remaining polygons in the same feature layer... this is basically a highlight and whiteout.

Here how I started:

map = new Map("mapDiv", {
  basemap: "topo",
  center: [-50, 50]

map.on("load", function(){
    map.graphics.on("mouse-out", function(evt){

var layer = new FeatureLayer("http://myserver/arcgis/rest/services/my_map/MapServer/1", {
      mode: FeatureLayer.MODE_SNAPSHOT

var hover_symbol = new SimpleFillSymbol(
  new SimpleLineSymbol(
    new Color([38,115,0]),
  new Color([38,115,0,0.75])

layer.on("mouse-over", function(evt){
    var hover_graphic = new Graphic(evt.graphic.geometry, hover_symbol);

This works to get a highlight over the feature that the mouse is hovering on. I now realize, however, that the new graphic is merely covering the old feature layer graphic instead of replacing it.

I see a Unique Value Renderer that allows you to style a feature layer by an attribute, but it seems like I would need to query the layer for that to apply here.

Any ideas on how to accomplish this on-the-fly? Can I somehow loop through the graphics in the feature layer and single out the polygon over which the mouse is hovering?

  • your approach look okay to me. (see comparable sample here: developers.arcgis.com/javascript/jssamples/fl_hover.html) is it causing any problems? Jun 15, 2015 at 13:55
  • Not causing problems exactly, but I was confused about how the graphics of a Feature Layer (which I now know inherits from Graphics Layer) interact and are different from the map's default graphics layer. Jun 18, 2015 at 13:57

1 Answer 1


As John Gravois suggested, the approach above works. To get the added functionality I wanted (i.e. the highlight and whiteout), I ended up using a basic query and setting new symbols for each of my categories.

function showResults(results) {

        // Give all feature graphics the default symbology
        for (i = 0; i < layer.graphics.length; i++) {

        var all_features = results.features;
        var feature = all_features[0];

        var quarter_list = feature.attributes.IDs_Pub_1_4.split(",");
        var half_list = feature.attributes.IDs_Pub_1_2.split(",");
        var three_list = feature.attributes.IDs_Pub_3_4.split(",");

        var quarter_graphics = $.grep(layer.graphics, function(value, index) {
            return $.inArray(value.attributes.Area_ID, quarter_list) > -1;
        var half_graphics = $.grep(layer.graphics, function(value, index) {
            return $.inArray(value.attributes.Area_ID, half_list) > -1;
        var three_graphics = $.grep(layer.graphics, function(value, index) {
            return $.inArray(value.attributes.Area_ID, three_list) > -1;

        for (i = 0; i < quarter_graphics.length; i++) {
        for (i = 0; i < half_graphics.length; i++) {
        for (i = 0; i < three_graphics.length; i++) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.