OpenLayers2 change feature's style

Question

Working with OpenLayers 2.11, I'm desperately trying to change my feature style as the user selects it (fairly simple I agree!).

Indeed, It seems easy but I can't see where It fails, perhaps someone experienced with OpenLayers could enlighten me.

Below is my code :

   function onFeatureSelect(event) 
   {

    var feature = event.feature;

    var styleWaypointSelect = new OpenLayers.StyleMap(
    {
        externalGraphic: 'img/map_marker.png',
        graphicWidth: 16, graphicHeight: 26, graphicYOffset: -24,
        title: 'selectedFeature'
    })


    var clonedFeature = waypointLayer.getFeatureById(feature.id);
    clonedFeature.style = styleWaypointSelect;

    waypointLayer.drawFeature(clonedFeature,styleWaypointSelect);
    waypointLayer.redraw(); /* refresh() I tried several things to refresh the layer but it doesn't seem to change anything at all*/

EDIT :

I finally figured out that OpenLayers StyleMap class allows different properties, "default", "delete", "temporary", "select". (you can see this when you debug the style object in firebug)

I added the "select" style of my vector layer like this :

        var styleWaypoint = new OpenLayers.StyleMap({
              "default": new OpenLayers.Style({
                externalGraphic: 'img/mobile_loc.png',
                graphicWidth: 16, graphicHeight: 26, graphicYOffset: -24,
                title: 'marker'
            }),
               "select": new OpenLayers.Style({
                externalGraphic: 'img/mobile_loc_select.png',
                graphicWidth: 16, graphicHeight: 26, graphicYOffset: -24,
                title: 'marker_select'
            })
        });

Answer 1

i didnt look into your code about error. but u can solve it with this way:

vectorLayer.features[x].style.externalGraphic = "'img/map_marker.png'";
vectorLayer.features[x].style.graphicWidth = 16;
vectorLayer.features[x].style.graphicHeight = 26;
vectorLayer.features[x].style.graphicYOffset = -24;
vectorLayer.features[x].style.title = 'selectedFeature';

vectorLayer.redraw();

if u put your codes into http://jsfiddle.net, i can check out what is wrong with your code too

i hope it helps you...

Answer 2

I know the topic is ab bit outdated, but just in case someone runs into this problem again you can use the following code to set the default and select style for an entire layer.

You can use other "well known redering intends" as described here.

style = new OpenLayers.StyleMap({
    "default": new OpenLayers.Style({
        strokeColor: "#339933",
        strokeOpacity: 1,
        strokeWidth: 3,
        pointRadius: 6,
    }),
    "select": new OpenLayers.Style({
        strokeColor: "#ffffff",
        strokeOpacity: 1,
        strokeWidth: 3,
        pointRadius: 6,
    })
});
pointLayer = new OpenLayers.Layer.Vector("Point Layer", {styleMap: style});

Answer 3

var vectormap = new OpenLayers.Layer.Vector('Overlay', 
        {
            styleMap: new OpenLayers.StyleMap(
            {
                 "default": new OpenLayers.Style({
                externalGraphic: 'girl.png',
                graphicWidth: 50, graphicHeight: 50, graphicYOffset: -24,
                title: 'marker'
            }),
               "select": new OpenLayers.Style({
                externalGraphic: 'boy.png',
                graphicWidth: 16, graphicHeight: 26, graphicYOffset: -24,
                title: 'marker_select'
            })
            })
        });
    featurearray = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(113.950,33.019));
    vectormap.addFeatures([ featurearray ]); 

This is my vector layer, but a bit wrong, my png image title attribute can not be displayed when the mouse to move up, I checked the official website the "OSM with Marker and Popup.html" code, exactly the same, you know why, thank you!