[GIS] Change feature layer symbol of single polygon on mouse hover

arcgis-javascript-apigraphics

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.enableMouseEvents();
    map.graphics.on("mouse-out", function(evt){
        map.graphics.clear();
    });
});

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

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

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

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?

Best Answer

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++) {
            layer.graphics[i].setSymbol(default_symbol);
        }

        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++) {
            quarter_graphics[i].setSymbol(quarter_symbol);
        }
        for (i = 0; i < half_graphics.length; i++) {
            half_graphics[i].setSymbol(half_symbol);
        }
        for (i = 0; i < three_graphics.length; i++) {
            three_graphics[i].setSymbol(three_symbol);
        }
}
Related Question