Leaflet – How to Stop ‘Drag’ from Moving Whole Map in Leaflet

drag and dropleafletmarkers

I have a leaflet map, containing a tileLayer, and a layerGroup

In the layerGroup, I plot circleMarkers, and then connect them with a polyline.

Though the markers are defined as draggable, I get no drag events for them, and any attempt to drag them results in moving the whole map. I thought it must be because the polyline is on top of the markers, but no such luck. polyline.bringToBack() didn't help.

var multiLine = [];
var line = [];
towTrack.clearLayers();
for (var ix = 0; ix < display_rows.length; ix++) {
    var row = display_rows[ix];
    var lon = row.EventLongitude;
    var lat = row.EventLatitude;
    if (lat != null && lon != null) {
        var pos = [lat, lon];
        line.push(pos);
        var marker = L.circleMarker(pos, {
            radius: 5,
            color: 'yellow',
            weight: 1,
            draggable: true
        }).addTo(towTrack);
        marker
            .on('dragend', function (e) {
                var position = e.target.getLatLng();
                e.target.setLatLng(new L.LatLng(position.lat, position.lng), { draggable: 'true' });
            });
        if (row.EventCode == 4 || row.EventCode == 9) {
            multiLine.push(line);
        }
    }
}
var polyline = L.polyline(multiLine, { color: 'red', weight: 1 }).addTo(towTrack);
polyline.bringToBack();

Best Answer

@Bill put me on the right track (puns obviously intentional...) but his solution added a level of complexity that seemed unnecessary in my case.

Instead of using a CircleMarker, I used my own Icon for a regular Marker:

var multiLine = [];
var line = [];
var eventIcon = L.divIcon({ html: '<svg height="12" width="12"><circle cx="6" cy="6" r="5" stroke="yellow" stroke-width="1" fill="none"></svg>'});
towTrack.clearLayers();
for (var ix = 0; ix < display_rows.length; ix++) {
    var row = display_rows[ix];
    var lon = row.EventLongitude;
    var lat = row.EventLatitude;
    if (lat != null && lon != null) {
        var pos = [lat, lon];
        line.push(pos);
        var marker = L.marker(pos, {
            icon: eventIcon,
            draggable: true
        }).addTo(towTrack);
        marker
            .on('dragend', function (e) {
                var position = e.target.getLatLng();
                e.target.setLatLng(new L.LatLng(position.lat, position.lng), { draggable: 'true' });
            });
        if (row.EventCode == 4 || row.EventCode == 9) {
            multiLine.push(line);
        }
    }
}
var polyline = L.polyline(multiLine, { color: 'red', weight: 1 }).addTo(towTrack);

No doubt there are times I'd really need a CircleMarker, but this isn't one of them!

Related Question