Add multiple parentLines to a leaflet marker

Question

I'm trying to create a straight line network in Leaflet, which at each junction has a marker, and on drag of each marker, update the position of the corresponding polyline which connects to it.

I've done some research (mostly this question) & reworked a fiddle to strip it down a bit to try & get it to do what I want. I am able to draw the network with individual polylines, however, I need to add multiple parentLines to the marker which is connected to two polylines. I can't find it in the Leaflet documentation, but punted with this:

marker_arr[1].parentLine = [polyline_a,polyline_b];

My issue is when I call the dragstart/drag/dragend handlers, it doesn't work with multiple polylines. (Edit) I have made some headway in capturing the parentLines as an array, but can only make it work for the first parentLine

function dragHandler(e) {
    var polyline=[]
console.log("drag")
if(e.target.parentLine.length){
    polyline.push(e.target.parentLine[0]);
} else {
    polyline.push(e.target.parentLine);
}
if(polyline){
    var latlngPoly = polyline[0].getLatLngs(),          // Get the polyline's latlngs
        latlngMarker = this.getLatLng();                             // Get the marker's current latlng
    latlngPoly.splice(this.polylineLatlng, 1, latlngMarker); // Replace the old latlng with the new
    polyline[0].setLatLngs(latlngPoly);           // Update the polyline with the new latlngs
}

}

Can anyone point me to either the documentation about parentLine, or how I might make this work? Using Leaflet v1.6.0 and cannot use more recent versions as this is to extend an already existing implementation of Leaflet based on 1.6.

Fiddle here

score 0 · Answer 1 · answered Mar 22 '22 at 21:17

Here is a sample.

Add to the marker the parentLines always as array:

marker_arr[0].parentLine = [polyline_a];
marker_arr[1].parentLine = [polyline_a,polyline_b];
marker_arr[2].parentLine = [polyline_b];

and then loop through all parentLines in the dragstart handler:


// Now on dragstart you'll need to find the latlng from the polyline which corresponds
// with your marker's latlng and store it's key in your marker instance so you can use it later on:
function dragStartHandler(e) {
        var marker = e.target;
    marker.polylineLatlng = {};
    
    e.target.parentLine.forEach((line)=>{
        var latlngPoly = line.getLatLngs(),         // Get the polyline's latlngs
          latlngMarker = marker.getLatLng();                             // Get the marker's current latlng
      for (var i = 0; i < latlngPoly.length; i++) {       // Iterate the polyline's latlngs
        if (latlngMarker.equals(latlngPoly[i])) {       // Compare marker's latlng ot the each polylines 
          marker.polylineLatlng[L.stamp(line)] = i;            // If equals store key in marker instance
        }
      }
    })
}

And in the drag handler:


// Now you know the key of the polyline's latlng you can change it
// when dragging the marker on the dragevent:
function dragHandler(e) {
        var marker = e.target;
    
    e.target.parentLine.forEach((line)=>{
        var latlngPoly = line.getLatLngs(),         // Get the polyline's latlngs
          latlngMarker = marker.getLatLng();                             // Get the marker's current latlng
        latlngPoly.splice(marker.polylineLatlng[L.stamp(line)], 1, latlngMarker); // Replace the old latlng with the new
        line.setLatLngs(latlngPoly);           // Update the polyline with the new latlngs
    })
    
}

And clean it in the dragend handler:


// Just to be clean and tidy remove the stored key on dragend:
function dragEndHandler(e) {
        var marker = e.target;
    delete marker.polylineLatlng;
    console.log("end");
}

Add multiple parentLines to a leaflet marker

1 Answers1