Leaflet Map Clustering + Marker Rotation

1

votes

Has anyone ever tried to use Leaflet Clustering Plugin + Marker Rotation Plugin? I tried to work with both but they work partially.

In a first view, I can see some clusters and some isolated (and rotated) markers. Every time I zoom in into some Cluster the rotated markers disappear. Does anyone have any idea why this happens?

leaflet

1

votes

to simply rotate a marker, use :This Leaflet Plugin

include this in your html :

<script src="../leaflet-plugin/Marker.Rotate.js"></script>

wen create a marker :

var marker = new L.Marker(map.getCenter(), {iconAngle: 90});

a complete example

0

votes

Found a solution provided by Dave Leaver..it works perfectly.

"You can hack it to work with L.MarkerClusterGroup (so it is no worse than it is already) by changing the start of the update function in the rotate plugin to bail if there is no _icon:

update: function() {
    if (!this._icon) {
        return;
    }

The problem is that the rotate plugin is overwriting the transform and fighting with leaflet on it. I recommend instead using a DivIcon with a child element that has the rotation, that way leaflet can happily update the transform to move the marker independent of the rotation.

As a totally broken example:

 var m = new L.Marker(getRandomLatLng(map), { icon: L.divIcon({html:'<img src="http://cdn.leafletjs.com/leaflet-0.5.1/images/marker-icon.png" style="-webkit-transform: rotate(39deg); -moz-transform:rotate(39deg);" />'})});"

Leaflet Map Clustering + Marker Rotation

2 Answers