Leaflet.js - Collide with marker

Question

I'm trying to make a function that calls an event when you gets within a 10m radius of the marker. Is there any good plugin or command for this?

I've seen that there's a distanceTo() but haven't found any good example or tutorial for it.

Thanks in advance, Calle

Answer 1

My understanding of the distanceTo() method is that it returns the distance from the current position to a given point. That would require you to know the point you want to measure the distance to, which you could do by iterating through all your marker points and calculating the distance to your current marker position, but that could really take awhile if you have a lot of markers.

I would suggest using the leaflet-knn plugin, as answered in this post .

If that doesn't work for you and you're willing to try a ham-fisted solution, you could always set a circle layer under you marker layer, giving each circle a radius of 10m and setting the opacity/fillOpacity to zero. Then, you could tie a hover event to the circle, which would fire when the cursor is 10m away from the marker. Here's a really general example:

var styleOptions = {
    opacity: 0, //the opacity of the circle border
    fillOpacity: 0, //the opacity of the circle
    className: "circle" //class for the circles
    };  

var circle = L.circle([lat, lng], 10, styleOptions).addTo(map);
var marker = L.marker([lat, lng]).addTo(map);

//create a hover event
jQuery(".circle").mouseover(function(){
... do something ...
});