Picking up the coordinates inside this polygon draw

Question

I already have a geojson being consulted and that is plotting these black dots. And then I inserted the leaflet-geoman plugin to give users the freedom to create polygons on the map. Basically draw something there.

For example: Draw a polygon to get only the information inside that polygon.

When using the tool to draw a polygon on the map I wanted to get which black dot is inside the drawing

in short: I have 4 points within my polygon drawing (which does not come from a geojson, the person draws) and I want to get the information from those points that are within that drawn polygon. Each black dot in this one has an id, and I want to know what points are within the space that the person drew.

My geoman-Leaflet code:

      map.pm.addControls({
        position: 'topright',
        // drawCircle: false,
        drawMarker: false,
        drawCircleMarker: false,
        drawRectangle: false,
        cutPolygon: false,
        editPolygon: false,
      });

My black dots on the map code:

  wellheads.forEach(function (d) {
        d.LatLng = new L.latLng(d.latitude, d.longitude);
      });

  const groupWells = g
        .selectAll('g')
        .data(wellheads)
        .enter()
        .append('g')
        .attr('pointer-events', 'visible');

      const points = groupWells
        .append('circle')
        .attr('class', d => {
          if (wellState.selectedWell.guid === d.wellboreGUID) {
            return 'redW';
          } else {
            return 'blackW';
          }
        })
        .attr('id', d => `id-${d.wellboreGUID}`)
        .attr('r', d => {
          if (wellState.selectedWell.guid === d.wellboreGUID) {
            return 1.7;
          } else {
            return 1.0;
          }
        })

Answer 1

This could be achieved with turf.js' booleanWithin, by testing each point against the created polygon.

For example you can a listener for when the drawing is complete:

map.on('pm:create', (e) => {  
  feature = e.layer.toGeoJSON();
  wellheads.forEach(function (d) {
        d.within = turf.booleanWithin(turf.point([d.longitude, d.latitude]), feature );
      });
});

This is a basic way to test this, I would recommend using L.marker or L.circle on your maps instead of manually drawing svg paths on the canvas.