CODEWITHSUNDEEP
leaflet
fabiomartins87
fabiomartins87

Reputation: 167

Leaflet Map Clustering + Marker Rotation

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?

Upvotes: 1

Views: 4183

Answers (2)

TronSoft
TronSoft

Reputation: 71

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

Upvotes: 1

fabiomartins87
fabiomartins87

Reputation: 167

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);" />'})});"

Upvotes: 0

Related Questions