Change dragging state for all markers

Question

I'm using Leaflet.markercluster 1.0.1

I'm trying to add button on my map, so users can enter in 'edit mode'. On click on that button it should toggle dragging state for all markers. I don't really know how to implement that correctly, but I wrote that code

var drag = false;
$('#button').on('click', function () {
    drag = !drag;
    markers.eachLayer(function (marker) {
        marker.options.draggable = drag;
        if (marker.dragging) {
            drag ? marker.dragging.enable() : marker.dragging.disable();
        }
    });
});

It works for some time, but then I get Exception on .enable()

Uncaught TypeError: Cannot read property 'classList' of null

Is anyone know any correct way to do that?

Thanks in advance!

Answer 1

It seems that the logic for the forEach method in MarkerClusterGroup iterates through markers not visible on the map after dragging a spiderified marker. Then the logic for enabling dragging fails, as the marker does not have an icon instance, because it has been removed from the map.

I've cleaned up the reproducible example a bit, and left a copy at https://playground-leaflet.rhcloud.com/qate/1/edit?html,output - I strongly suggest that you turn this into a good bug report in the Leaflet.MarkerCluster.

You may also check if each of the markers has a marker._map private property to check if they are on the map, and skip those which are not, but this may lead to other issues down the road.