Determining if another marker (Point or Polyline) where marker Point dragged in Leaflet?

Question

I'm trying to create interaction between 2 markers with Leaflet, I would like to be able to drag a marker onto another

Either between one point and one linestring, or between 2 points.

I added the draggable:true option when creating my markers :

var marker = L.marker(latlng, {draggable: true}); 

So I'm able to move it and catch the dragend event.

But how do I know if there is another marker where I dragend it ?

I guess I could try to find markers in a radius zone from where I release the marker. But this depends on the zoom level I am. If I'm at zoom level 1, two points are "close" if there is only 100 km between them. If I'm at zoom level 18, two points are "close" if there is only 10 meters between them...

Also, I would love to be able to drag a marker onto a LineString between 2 points. For example :

Point A *-----------------* Point B
                ^
                |
                | Dragging Point C in the middle of the LineString
      Point C   *

But when I'm dragging the Point C marker on the LineString it doesn't fire the onmouseover event of the LineString.

How do I know if there is another marker (Point or Polyline) where I dragend a marker Point ?

Answer 1

You would probably be interested in Leaflet.Snap plugin:

Enables snapping of draggable markers to polylines and other layers

(unfortunately the online demo is broken, not sure exactly why… but you can download the repo, make sure the docs/index.html file calls Leaflet files using the http:// protocol, and open it in your local browser, it should work fine)

It provides some events that you can use to be notified when your marker is dropped onto another one or on a LineString / Polyline.

I do not know if it is compatible with Leaflet 1.x however…