How to change a marker on click

Question

I've crated a map and tried, but it doesn't change until another event is caught or zooming map or by switching the browser tabs. What is the reason for this. please help me I've fiddle the code here http://jsfiddle.net/HMFLf/.

This is what I've done to change marker :

vectorLayer.events.on({
                featureselected: function (event) {
                    var fixer = confirm("Are you want to change clolor this marker");
                    if (fixer == true) {
                        size = new OpenLayers.Size(21, 25);
                        event.feature.style = { externalGraphic: "http://www.openlayers.org/dev/img/marker.png", graphicHeight: 25, graphicWidth: 21, graphicXOffset: -((size.w / 2) - 2), graphicYOffset: -(size.h - 2) };
                    }                    
                }
            });

Thanks in advance.

Answer 1

You need to call the redraw method after changing the style.

And you are close. Redraw gets called for you when you zoom, but you have to force it manually when changing style or feature properties.

Answer 2

I got vectorLayer.redraw() to work on your jsFiddle from the jsFiddle code:

... event.feature.style = { externalGraphic : "http://www.openlayers.org/dev/img/marker.png", graphicHeight : 25, graphicWidth : 21, graphicXOffset : -((size.w / 2) - 2), graphicYOffset : -(size.h - 2) }; } vectorLayer.redraw(); } }); ....