Snap on Point before Polyline

[derdem]

Hey,

I am working with leaflet pm where I have multiple lines and points plotted on the map. The User can draw lines and is supposed to snap the line on the existing markers. The arrangement of my lines and points is such that there is always a point at the end of the line. Now, I want to register the snapping event which is working fine when snapping to a line, but when I snap to the end of the line where a point is placed it want to recognise the Point as the .layerInteractedWith compontent. However snapping always recognises the line instead. Is there a way to change this to a Point element?

[dioslibre]

I had the same problem until a few seconds ago. I tried adding the option snapIgnore:true to polylines and polygones but it didn't work. I checked the build file leaflet.pm.min.js and there wer no mention of 'snapIgnore' in the source code. I solved it by replacing this :

i=this._calcClosestLayer(r.getLatLng(),this._snapList)

by this

i=this._calcClosestLayer(r.getLatLng(),this._snapList.filter(f => f instanceof L.CircleMarker))

[derdem]

Thanks for the answer dioslibre. You approach seems to work, however I still need the possibility to snap to lines and polygones, but prioritize CircleMarkers. I tried to change the order of the snapList, but that didn't help unfortunately. It seems to me that the pm is looking for the first Layer in snapList which matches the distance criteria and uses it to snap the editing line to. Apparently, changing the order of the snapList, doesn't result in the desired outcome.

Any Ideas how to solve my problem?

[dioslibre]

First filter snaplList by markers, if the resulting array is empty, filter snapList by lines, and then call calcClosestLayer on the resulting filtered array.

[codeofsumit]

Interesting problem. The function in question should be this one:
https://github.com/codeofsumit/leaflet.pm/blob/develop/src/js/Mixins/Snapping.js#L250

  _calcClosestLayer(latlng, layers) {
    // the closest polygon to our dragged marker latlng
    let closestLayer = {};

    // loop through the layers
    layers.forEach((layer, index) => {
      // find the closest latlng, segment and the distance of this layer to the dragged marker latlng
      const results = this._calcLayerDistances(latlng, layer);

      // show indicator lines, it's for debugging
      this.debugIndicatorLines[index].setLatLngs([latlng, results.latlng]);

      // save the info if it doesn't exist or if the distance is smaller than the previous one
      if (
        closestLayer.distance === undefined ||
        results.distance < closestLayer.distance
      ) {
        closestLayer = results;
        closestLayer.layer = layer;
      }
    });

    // return the closest layer and it's data
    // if there is no closest layer, return undefined
    return closestLayer;
  },

It (seems to) compare the distance of each layer to the marker that should be snapped and changes it only if it's lower. If multiple layers have the same distance it would stay at the first one that was found in the leaflet loop map.eachLayer (which populated the snapList).

How could a prioritization feature look like? Adding an array of prios in the options and have snapList properly reordered by it?

But then again, @derdem are you sure reordering the snapList does not work? 🤔