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 ?

  • As per the Tour there should be only one question asked per question. – PolyGeo Jun 2 '17 at 21:41
  • @PolyGeo ok, I edited the question. I hope it's more precise. – Thibault Jun 3 '17 at 7:42
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…

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

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.