Cannot read property '_leaflet_mousedown5' of null when attempting to enable marker dragging in Mapbox/Leaflet

Question

I am building the functionality that allows mapbox markers to be edited from within a CMS. The functionality should open up and populate a form when a map marker is clicked, and then allow the map marker to be dragged. When the form is saved, the content is submitted via ajax and then the map is reloaded with the featureLayer.loadURL("my_geojson_endpoint").

I have added comments throughout my code below to outline how I am getting to the error.

N.B. I define a property db_id in the geojson to identify each point because when you apply a filter, _leaflet_id changes. I also have jquery included in the code.

Code:

// loop through each marker, adding a click handler
$.each(points._layers, function (item) {
    var point = points._layers[item];
    attachClickHandler(point);
});

function attachClickHandler(point) {
    // open the edit state for the marker on click
    $(point._icon).on("click", function () {
        openEditState(point);
    })
}

function openEditState (point) {
    disableEditOthers(point);
    displayContent(point);
    point.dragging.enable(); // this line causes the error
    $(point._icon).off("click");
}
function disableEditOthers (point) {
    // hide the other markers from the map (using db_id as mentioned above)
    points.setFilter(function (f) {
        return f.db_id === point.feature.db_id;
    })
    // this functions as a callback to display the popup
    // since applying the filter on click, does not show the popup
    setTimeout(function () {
        for (key in points._layers) {
            points._layers[key].openPopup();
        }
    }, 0)
}

In the map creation step I have been able to call this dragging.enable() method on each of the markers and provide "draggability" to all of them, however this is undesirable from a usability point of view. I want the user to clear swap in and out of an edit state.

I discovered this issue on github, solved by the solution to this. However after swapping my mapbox.js version out to the standalone and including the latest version of leaflet (0.7.3) the same error still occured.

Am I calling the function on the wrong property of the object? dumping out the "point" variable just before the line which errors does not show that the draggable property has the enable() function defined.

Any help is much appreciated.

scott_R scott_R · Accepted Answer · 2015-06-17T12:55:07

Ok so as a slight workaround, but still not solving the original error.

$.each(points._layers, function (item) {
    points._layers[item].dragging.enable()
})

Because I have filtered out the other points, enabling dragging on all points is working around the issue.

If you can provide a fix to my original fix (avoiding the loop) I am happy to accept it.

Cannot read property '_leaflet_mousedown5' of null when attempting to enable marker dragging in Mapbox/Leaflet

1 Answers