How can I rotate a marker in OpenLayers

Question

I'm creating markers using this method :

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
`enter code here`markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));

Now , I want to rotate the marker 90 degrees to the left (or right). How can I do it? I was able to find example to rotate a feature , but I'm not using a feature.. I'm using a marker.

Thx.

Answer 1

As @dariapra mentioned. Your better off using a vector feature so you can take advantage of the rotation property.

You will find no drawbacks from switching over. You will see that using the more flexible feature vector will be more convenient.

Use the externalGraphic style property to designate the marker image.

Answer 2

I think this boils down to how you can rotate the marker image using JavaScript as I don't think there's a way of using OpenLayers to do this.

There's a neat CSS3 way of rotating images here: http://www.w3schools.com/cssref/css3_pr_transform.asp. And there's plenty of JavaScript libraries that will do this for you...you might find you're using a library (e.g. JQuery) that has this capability for you already.

One last thing. Rotating images can sometimes look a bit messy when done on the fly so the other alternative is to display your features as a vector - though whether this works for you will depend what your icon looks like and whether you can get a decent vector representation of it.

Hope this helps.