CODEWITHSUNDEEP
openlayers-3
gokhangokce
gokhangokce

Reputation: 461

Rotating marker (icon) in openlayers 3

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.

Upvotes: 1

Views: 5777

Answers (2)

Phae7rae
Phae7rae

Reputation: 534

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'
    })
)

Upvotes: 2

Juho Vepsäläinen
Juho Vepsäläinen

Reputation: 26873

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.

Upvotes: 2

Related Questions