Leaflet markers within a radius

[jagb1007]

Good morning can help me with some tutorial, where I can draw a marker anywhere on the map and by a combo box can choose a distance and I can draw a circle by seeing the names of markers that are in that circle, something like that

[sfairgrieve]

This seems like a more general Leaflet JS question, but I can try to answer it. You can use Leaflet.Draw for the drawing functionality. When a user draws a circle, you can get the radius in meters of that circle. Or, you can let the user place a marker using Leaflet.draw and then add a new L.Circle layer to the map using the radius from the combobox. Once you have center point + radius, you can use TurfJS to help with the computation of finding points within the polygon/circle. turf.circle will create a circle polygon given a center point and radius, and then you can use turf.within to find the points that fall within that circle polygon. This assumes you're using GeoJSON for representing points. If you're not using GeoJSON, you could do something more basic like calculating the distance of every point from the center point and then only keeping points that fall within the user desired radius. Leaflet JS includes functions for making these calculations while taking into account the curvature of the Earth. Turf JS also includes the distance function, which performs a similar calculation.

Are you storing/serving up these points through a web service, or will all points be added to the map then filtered? The above approaches will work fine with 100s/1000s of points but may be slow/lock up the browser with larger numbers of points. If you have a lot of points that you're trying to filter, you should probably stick those in a geospatial database or other geo services that move those calculations out of the browser.