0

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();
  • 1
    Check out github.com/w8r/Leaflet.Path.Drag I was able to have my points drag instead of the map. – Bill Chappell Aug 10 '18 at 15:40
  • 1
    I didn't have a group layer but just circleMarkers and had the same issue on the map moving instead of the points. – Bill Chappell Aug 10 '18 at 15:48
  • @BillChappell But surely this is supposed to be part of Leaflet core. codepen.io/PyroStrex/pen/JKpGKv doesn't have a problem, and doesn't include anything but Leaflet 0.7.7. Every other example I've seen is the same, but I can't figure out what's different in my code. – Auspex Aug 12 '18 at 9:18
  • Oh... Except L.CircleMarker is an L.Path, not an L.Marker. I think maybe I'll just use L.Marker with an icon. – Auspex Aug 13 '18 at 12:36
  • 1
    Here is a example of using that script to move circlemarkers without moving the background map. Beyond this everything moved the background map with the only exception being simple markers. gistechsolutions.com/leaflet/DEMO/phpDemo/update.html – Bill Chappell Aug 13 '18 at 12:40
1

@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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.