3

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 ?

2
  • As per the Tour there should be only one question asked per question.
    – PolyGeo
    Jun 2, 2017 at 21:41
  • @PolyGeo ok, I edited the question. I hope it's more precise.
    – Thibault
    Jun 3, 2017 at 7:42

1 Answer 1

3

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…

2
  • Thank you @ghybs, this seems nice. I'll try it in my project and accept your answer if it works fine.
    – Thibault
    Jun 4, 2017 at 20:13
  • It works like a charm ! Thank you @ghybs for pointing this great plugin.
    – Thibault
    Jun 19, 2017 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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