Question

119

Rotate marker in Leaflet

rated 0 times [ 122] [ 3] / answers: 1 / hits: 31757 / 12 Years ago, wed, november 21, 2012, 12:00:00

How can I rotate a marker in leaflet? I will have a lot of markers, all with a rotation angle.

I've tried this solution from runanet/coomsie at Leaflet on GitHub, but nothing happens with my marker:

L.Marker.RotatedMarker= L.Marker.extend({    

    _reset: function() {

        var pos = this._map.latLngToLayerPoint(this._latlng).round();



        L.DomUtil.setPosition(this._icon, pos);

        if (this._shadow) {

            L.DomUtil.setPosition(this._shadow, pos);

        }



        if (this.options.iconAngle) {

            this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';

            this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';

            this._icon.style.MsTransform = 'rotate(' + this.options.iconAngle + 'deg)';

            this._icon.style.OTransform = 'rotate(' + this.options.iconAngle + 'deg)';

        }



        this._icon.style.zIndex = pos.y;

    },



    setIconAngle: function (iconAngle) {



        if (this._map) {

            this._removeIcon();

        }



        this.options.iconAngle = iconAngle;



        if (this._map) {

            this._initIcon();

            this._reset();

        }

    }



});



var rotated = new L.Marker.RotatedMarker([63.42, 10.39]);

rotated.setIconAngle(90);

rotated.addTo(map);

Any other ideas or solutions? (Testing with Firefox 16 on Windows.)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

juancarlos

Add To Favorites

Follow

Total Points: 580

Total Questions: 105

Total Answers: 103

Location: Grenada

Member since Sun, Dec 20, 2020

3 Years ago

answered 12 Years ago kaitlynnb · Accepted Answer

Running the code as it is, the icon will disappear when you try to rotate it in Firefox (try rotating on a mouseclick instead of on load and you will see that the icon appears before you try to rotate it), but I'm willing to bet it will work (the first time) in a webkit browser. The reason is the transform lines:

this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';

this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';

Firefox also uses CSS transforms to position icons, so before rotation it will have Moztransform will have a value of for example translate(956px, 111px). The way the code is now, it will replace that with simply rotate(90deg) and Firefox won't know where to place the icon.

You want Moztransform to have a value of translate(956px, 111px) rotate(90deg), so if you use this code it will work the first time, like in webkit.

this._icon.style.MozTransform = this._icon.style.MozTransform  + ' rotate(' + this.options.iconAngle + 'deg)';

However, it will break on the next rotate, so you really need to set both the translation and rotation in one go, like this:

this._icon.style.MozTransform = L.DomUtil.getTranslateString(pos) + ' rotate(' + this.options.iconAngle + 'deg)';

Then you can get rid of the L.DomUtil.setPosition(this._icon, pos); at the start.