CODEWITHSUNDEEP
javascriptfiltergeojsonmapbox-gl-js
Donalbain
Donalbain

Reputation: 35

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

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?

Upvotes: 3

Views: 4334

Answers (1)

Florian Zdrada
Florian Zdrada

Reputation: 161

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], ...]
)

Upvotes: 5

Related Questions