i have an OpenLayers.Layer.Image object.. is there any way to rotate it using openlayers ?

please don't suggest to rotate the entire div using jquery, when i do this i'm losing the zooming and panning effect of the openlayers..

i have an OpenLayers.Layer.Image object.. is there any way to rotate it using openlayers ?

please don't suggest to rotate the entire div using jquery, when i do this i'm losing the zooming and panning effect of the openlayers..

• javascript
• openlayers

Share Improve this question Follow asked Jan 23, 2013 at 15:12 Gilad_GrGilad_Gr 30333 silver badges99 bronze badges 2

• Do you need to rotate it dynamically? If not you could just rotate the image before you create the OpenLayers.Layer.Image object from it. – Martin Commented Jan 23, 2013 at 21:47
• yes, i need to be able to adjust it's angle on code.. – Gilad_Gr Commented Feb 7, 2013 at 12:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

There's not really a way to do this with an OpenLayers image. You can, however, workaround this by using a vector layer.

Using Vectors to Rotate an Image

If you'd like to add a rotated image to the map, as well as maintain zoom and pan features of the map relative to the image, you can do the following:

Create a vector layer, and set the externalGraphic = your image src:

var styleMap = new OpenLayers.Style({
    externalGraphic: "${getUrl}" // attribute replacement syntax
}, {context: context});
var vectorLayer = new OpenLayers.Layer.Vector("My Image Overlay", {
    styleMap: styleMap
});
map.addLayers([vectorLayer]);

Next, create a vector feature whose external graphic matches the source of your image:

var newPoint = new OpenLayers.Geometry.Point(x, y);
var pointFeature = new OpenLayers.Feature.Vector(newPoint);
pointFeature.attributes.externalGraphic = "path/to/image/src/";

Add the feature to your vector layer:

vectorLayer.addFeatures([pointFeature]);

Then rotate it. For this you simply need to configure a point of origin about which your image will rotate:

var origin = new OpenLayers.Geometry.Point(x, y); // should match coordinates of pointFeature
var center = new OpenLayers.Feature.Vector(origin);
vectorLayer.addFeatures([center]);

You can optionally change style attributes of your origin of rotation to hide it from the map if desired.

Finally, change the orientation of your pointFeature to place as desired:

pointFeature.geometry.rotate(angle, origin);
pointFeature.layer.drawFeature(pointFeature);

More examples of how to do this here and here.