Obtain the markers located within a specified polygon using Leaflet Draw

Is there a way to retrieve all markers within polygons in Leaflet's draw? How do I accomplish this?

To create the markers:

for (let i = 0; i < addressPoints.length; i++) {

    var point = addressPoints[i];
    var marker = L.marker(new L.LatLng(point["lat"], point["lng"]))
    .on('click', onClickMarker);

    markers.addLayer(marker);
}

After creating the markers, draw the polygon:

map.on(L.Draw.Event.CREATED, function (e) {
    var layer = e.layer;
    drawnItems.addLayer(layer);
    var polygon = layer.getLatLngs();
    console.log(polygon);
});

My goal is to retrieve all the markers located within the specified polygon.

Answer №1

To achieve this, start by initializing an empty array and iterating through all elements to identify those that are instances of L.Marker and fall within the boundaries of the polygon.

map.on(L.Draw.Event.CREATED, function (e) {
  let layer = e.layer;
  drawnItems.addLayer(layer);
  let polygon = layer.getLatLngs();
  console.log(polygon);

  let markers = [];

  map.eachLayer((layer) => {
    if(layer instanceof L.Marker && map.getBounds().contains(polygon)) {
        markers.push(layer.feature);
    }
  });
});

Answer №2

To create your drawnItems as a Layer Group in Leaflet GeoJSON, you can employ Turfjs or Leaflet's point-in-polygon function on each Marker to determine if it falls within any of the drawn layers. For detailed instructions, refer to this discussion on identifying latlong positions outside polygon regions on OpenStreetMap

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a relative path in Ajax is ineffective

I am facing an unusual issue with AJAX. The HTML page I am working on is calling an AJAX function from this location: public_html/test/books.html The AJAX file that needs to be called is located here: public_html/lists/include/vote_up.php I have tried ...

The Angular function fails to execute when clicked

I am trying to trigger a new page launch when a cube is clicked using Angular. Unfortunately, my current code doesn't seem to be working as expected and nothing happens when I click the cubes. This makes me wonder if there is something wrong with my i ...

Saving attribute values in AngularJS by default

My custom tags use 'repairwidth' with the 'width' attribute to get input. The width is determined by the size. The first repairwidth tag always has a width of 50. The second and third repairwidth tags have a dynamic width based on "{ ...

angularjs issue with $setPrestine function not providing reliable results

I have encountered an issue with the login form code. Initially, I am able to reset the form fields and error messages successfully on the first attempt (both success and failure scenarios work). However, on the second try, I am unable to reset the form fi ...

Is there a way to extract JSON keys that begin with a numerical value?

I am attempting to retrieve JSON data from sparkfun using ajax: var token = "someToken"; var jsonData = $.ajax({ url: "https://data.sparkfun.com/output/" + token + ".json", data: { page: 1 }, dataType: "jsonp", }).done(function (results) { ...

React.js: Dynamically Highlighting Menu Items Based on Scrolling位置-GaidoWhen a

Having trouble finding a solution for this issue. I'm currently working on creating a navigation bar with scroll-to functionality, where clicking on a menu item scrolls the page to the corresponding section. However, I am unsure how to change the colo ...

Consistently shifting the Aframe camera towards the focal point

Is there a way to continuously adjust the view of my Aframe scene based on the current viewing direction? It seems like there are two key components needed for this: (1) obtaining the current viewing direction in the correct format, and (2) creating and u ...

What is the best way to implement rotation functionality for mobile devices when dragging on a 3D globe using D3.js and an HTML canvas?

I have been experimenting with the techniques demonstrated in Learning D3.js 5 mapping to create a 3D globe and incorporate zoom and rotation functionalities for map navigation. Here is the function that handles both zooming and dragging on devices equipp ...

Create a visual representation by converting it into an HTML table

Check out my JSFiddle here: http://jsfiddle.net/0r16e802/4/ I'm attempting to display an image as an HTML table, but I'm facing two major issues with my algorithm: Only the first image is loaded in the first row and I need to figure out how to ...

Utilize jQuery function within an HTML form

I am trying to integrate my jQuery function with an HTML tag for my login form that connects to an Azure database. I want a modal pop-up to appear when the client presses the Login button, displaying a specific message based on whether the user is in the d ...

Retrieve JSON data within a service and provide it to a component

I am currently facing an issue with loading data from a JSON file into my component using a service. The data is successfully loaded in the service, as confirmed by the console log; however, when trying to access the data in the component, it does not disp ...

What are some solutions for resolving the npm error code elifecycle issue?

After following the documentation, I successfully installed React JS but encountered an error when trying to run the app. The error code displayed was elifecycle npm err errno 1. Can someone please assist me in resolving this issue? Additionally, it's ...

Is it possible to uncheck a checkbox from a list, even if some of them are already unchecked?

I am attempting to implement a feature where checking a checkbox selects all others in the list, and unchecking one deselects all. Currently, only selecting one checkbox allows me to check all the rest, but unchecking one doesn't trigger the reverse a ...

Proceed with downloading the file only when a checkbox has been ticked off and the form has been

Is there a way to make a PDF download only when a user checks a checkbox and submits the form, rather than just checking the checkbox and hitting submit? I am limited to using Jquery or plain javascript and do not have access to backend files. The checkbox ...

Typescript - Error in Parsing: Expecting an expression

I am currently working with Vue and TypeScript and have encountered a problem. How can I resolve it? Here is the code snippet in question: private setTitle(systemConfig: any) { const systemConfigParse; let obj; systemConfigParse = JSON.parse(sy ...

The curly braces in AngularJS are not resolving as expected, however, the ng-bind directive is functioning properly

I'm currently working on a Django application and utilizing AngularJS for my frontend. I have a straightforward piece of code that looks like this: <div class="vert-carousel" ng-controller="PrizeController"> <div class="gallery-cell" n ...

The state in useState is failing to update correctly following selections made within the dropdown menus

I am currently facing an issue with my dropdown disabling function, which is not enabling the dropdown properly. I suspect that this is due to asynchronous problems stemming from the use of useState. const [homeSelect, setHomeSelect] = useState('Home& ...

Transform a JSON array with keys and values into a structured tabular format in JSON

Looking to transform the JSON data below for a Chart into a format suitable for an HTML table: var chartJson = [ { header : '2016', values : [1, 5, 9] }, { header : '2017', values : [2, 4, 8] ...

Mysterious anomaly observed: Peculiar trajectory detected in canvas image during left

I have a fascinating HTML5 Canvas that showcases the movement of two identical objects to both the right and the left. Although the right side operates flawlessly, I've noticed that the left object leaves behind an intriguing trail with a hint of gree ...

The modal is functioning properly on Firefox and Internet Explorer, but it is experiencing issues

Having an issue with my modal not functioning properly in Chrome. When I click on it, only the background fades and both the before and after content load in the Chrome Dev tools simultaneously with no visible content in between. Here is a link to the Cod ...