How to filter mapbox fetaure using radius and latlng - mapbox-gl-js

Question

I have a layer on mapbox studio containing all the postal code plotted on the map and I am accessing it using access key and layer id ,
I want to filter out only the postal code (marker) inside a radius

Answer 1

Turf provides a pointsWithinPolygon() function, that helps you to find any points within the circle. Here is an example:
mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlcHUiLCJhIjoiY2l6dXZ5OXVkMDByZDMycXI2NGgyOGdyNiJ9.jyTchGQ8N1gjPdra98qRYg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-46.6062, -23.5513],
zoom: 11
});
map.on('load', function () {
// List of your marker locations
var points = turf.points([
[-46.6318, -23.5523],
[-46.6246, -23.5325],
[-46.6062, -23.5513],
[-46.663, -23.554],
[-46.643, -23.557]
]);
// Create circle with radius
var center = [-46.6062, -23.5513];
var radius = 3;
var options = {steps: 10, units: 'kilometers', properties: {foo: 'bar'}};
var circle = turf.circle(center, radius, options);
// Find point within circle
var markerWithin = turf.pointsWithinPolygon(points, circle);
console.log("Found: " + markerWithin.features.length + " points");
// Draw circle polygon
map.addLayer({
'id': 'circle',
'type': 'fill',
'source': {
'type': 'geojson',
'data': circle
},
'layout': {},
'paint': {
'fill-color': '#525252',
'fill-opacity': 0.2
}
});
// Draw all points
map.addLayer({
'id': 'points',
'type': 'circle',
'source': {
'type': 'geojson',
'data': points
},
'layout': {},
'paint': {
'circle-radius': 5,
'circle-color': 'red',
'circle-opacity': 1
}
});
// Draw marker with in circle
markerWithin.features.forEach(function(marker) {
// Create marker
new mapboxgl.Marker()
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
});
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; };
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://npmcdn.com/#turf/turf/turf.min.js'></script>
<div id='map'></div>