Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rotate marker in Leaflet

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.)

like image 641
sindrejh Avatar asked Nov 21 '12 13:11

sindrejh


People also ask

How do you rotate a leaflet marker?

your-marker-class'). each(function () { var deg = $(this). data('rotate') || 0; var rotate = 'rotate(' + $(this). data('rotate') + 'deg) scale(0.5,0.5)'; $(this).

How do you use a marker in leaflet?

Adding a Simple MarkerStep 1 − Create a Map object by passing a <div> element (String or object) and map options (optional). Step 2 − Create a Layer object by passing the URL of the desired tile. Step 3 − Add the layer object to the map using the addLayer() method of the Map class.

How do you add a custom marker in leaflet?

Now you can above icon for the marker in the map as below: L. marker([51.5, -0.09], {icon: greenIcon}). addTo(map);


2 Answers

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.

like image 93
robpvn Avatar answered Sep 21 '22 05:09

robpvn


This solution is by far the easiest: https://github.com/bbecquet/Leaflet.RotatedMarker

Note: it only modifies the existing marker, allowing two more options (rotationAngle and rotationOrigin).

The solution works very well. As per the GitHub page, a usage example:

L.marker([48.8631169, 2.3708919], {
    rotationAngle: 45
}).addTo(map);
like image 31
ThinusP Avatar answered Sep 20 '22 05:09

ThinusP