Take the 2-minute tour ×

I'm creating markers using this method :

var markers = new OpenLayers.Layer.Markers( "Markers" );
var size = new OpenLayers.Size(21,25);
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.


share|improve this question
A comment to the code you have posted. According to the OpenLayers documentation, using a layer of the class OpenLayer.Layer.Vector instead of the class OpenLayer.Layer.Marker is preferable (goo.gl/nco8y). –  dariapra Nov 12 '12 at 11:21
Thank you daria , will update code now. Will this enable me to rotate markers? –  Alophind Nov 12 '12 at 11:29
Although I don't know the example you are talking about (I have been unable to find it), I guess that it should work. I think it because with new code the vector layer will be populated with features; with the current code you don't have - from a programming point of view - features. –  dariapra Nov 12 '12 at 11:49
This is the example i was talking about openlayers.org/dev/examples/styles-rotation.html –  Alophind Nov 12 '12 at 13:08

2 Answers 2

up vote 1 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

Your Answer


