Rotating marker (icon) in openlayers 3

Question

I m using openlayers 3 in my project. I created a custom marker (icon) and i need to rotate marker with angle.

Is anybody tried this before? It is a critical part of my code and i couldnt figure it out.

Note: Not the map. just marker.

Answer 1

Set up an overlay like in the icon example and apply CSS rotation to it (ie. transform: rotate(120deg);, add browser prefixed versions as needed). If you need this to be dynamic, adjust the property through JavaScript.

Answer 2

In current versions of OpenLayers 3, you can use the rotation property of ol.style.Icon like this:

new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        rotation: Math.PI / 2.0,
        src: 'icon.png'
    })
)