Mapbox JS GL: Filter points by features

I have a mapbox map that displays a number of points from a GEOJson source with several features and independent categories. I want to be able to filter by these features.

Ideally when I click on a checkbox filter only the relevant points should remain visible on the layer.

So I guess after a click on a checkbox the map points should all be cleared and the map should be redrawn with only the relevant points. For that I need to know

• how to loop over all active points after the click on the checkbox and kick all out all points that are not wanted

Or

1. clear all the points from the map
2. load/add only a filtered part of the points to the map
3. refresh the map data.

All the examples I found on the mapbox page use different layers for the categories and toggle the visibility of these layers. This assumes that a point can only be in one category at a time. But in my case there are several categories that are independent from each other (similar to the categories “color”, “shape”, “weight”, etc). So I need to filter the points individually.

Any idea how to tackle this?

Answer

According to the documentation, you can achieve this by using filters. Filters are written as expressions.

In your case, you want to filter the points individually. You don’t have to clear all the points or refresh the map data.

Let’s say we have 3 categories: color, shape and weight. We suppose that your GeoJSON source is like that :

this.map.addSource('points-source', {
  type: 'geojson',
  data: { 
    type: 'FeatureCollection', 
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [lng, lat],
        },
        properties: {
          color: 'blue',
          weight: 34,
          shape: 'shape1'
        }
      },
      ...
    ]
})

You can filter the points directly in the layer definition, depending on the properties of each points :

this.map.addLayer({
  id: 'points-layer',
  type: 'symbol',
  filter: ['all', ['==', 'color', 'blue'], ['>=', 'weight', 40], ...],
  source: 'points-source',
  paint: { ... }
})

You also want to filter the points dynamically with a checkbox filter. In that case, you can set the filter of a specific layer with the setFilter() function:

this.map.setFilter(
   'points-layer', 
   ['all', ['==', 'color', 'red'], ['>=', 'weight', 10], ...]
)