Change Icon of Single Vector Feature in Layer

Question

Currently I am trying to change the icon of a particular feature of a vector layer that the user is focusing on. I add each feature to the map like so:

var point = new OpenLayers.Geometry.Point(pt.lon, pt.lat);
var markerStyle = OpenLayers.Util.extend(OpenLayers.Feature.Vector.style['default'],  {
    externalGraphic: iconURL
});
var marker = new OpenLayers.Feature.Vector(point, attributes, markerStyle);

Later I do the following to update the feature's icon:

var marker = this.findSelectedMarker();
if (marker) {
    marker.style.externalGraphic = newIconUrl;
    this.layer.redraw();             
}

But when the layer redraws, all features in my layer use the newIconUrl , not simply the selected marker that I am trying to update.

How can I change the icon of the one selected feature of my layer? Thanks.

Answer 1

There were two issues I needed to fix in order to solve this. The first was related to using multiple OpenLayers styles, both at the layer level as well as the individual feature level. I removed the styling for each individual feature, so that only the following layer style was being implemented:

this.layerStyle = new OpenLayers.StyleMap({ 
    'default': {
        externalGraphic: media_url + '${iconURL}',
        graphicHeight: 32,
        graphicWidth: 32,
        graphicXOffset: -16,
        graphicYOffset: -32,
        fillOpacity: 0.75
    }
});

The second change I made was to use attribute replacement syntax to designate the icon URL with a feature attribute called '${iconURL}' . This allowed me to change the icon url by simply changing an attribute of the selected feature and redraw the layer:

focusedMarker.attributes.iconURL = this.focusedURL;
this.layer.redraw();