How to filter features from coordinates - reactjs

Question

I'm using mapbox-gl and mapbox gl draw.
On the map, there will be a layer which has all markers. And I implemented polygon draw on that map using mapbox-gl-draw.
After that, I use turf.js to get the points within the drawn pologon. So, now, I have those points.
But those points are just points, not fully features. I want to query that features using those points.
Let's say I get these coordonites points as a result of turf.
[
[2, 2],
[3, 3],
[4, 4]
]
On the above mentioned layer, I've added markers and one of those looks like below:
{
type: "Feature",
properties: {
title: name,
id: id,
},
geometry: { coordinates: [long, lat], type: "Point" },
}
So, how can I get those features using above points?

Answer 1

This data-wrangling task comes up a lot in spatial web development. All you need to do is build out a geojson Point feature for each set of coordinates. You can use Array.map() for this:
const pointFeaturesArray = coordinatesArray.map((coordinates) => {
return {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: coordinates
},
properties: {}
}
})
pointFeaturesArray is now an array of valid geojson point features, but what you probably want is a FeatureCollection (an array of geojson features is not valid geojson on its own). To do that, just set this arrray to the features property in a FeatureCollection:
const pointsFC = {
type: 'FeatureCollection',
features: pointFeaturesArray
}
You may want to test this geojson to make sure it is valid. One way to do this is to log it to the console, then copy and paste it into geojson.io. If it is valid it will appear on the map, if it is not valid, you will see some red highlighting in the code editor area telling you where something is wrong.
pointsFC is now ready to use in map.addSource():
map.addSource('mypointfeatures', {
type: 'geojson',
source: pointsFC
}