mapbox / mapbox/mapbox-gl-js

Dynamic filtering logic with clustering activated can lead to unexpected behaviors

Open
#13,077 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs information :pray:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**mapbox-gl-js version**: 3.0.1

### Question

I am using Mapbox and, more especially, the clustering logic we can use in the addSource function. But there are some little things I don't understand or that have not been deeply explained.

1. Filtering language logic

I am using the filtering language logic that works very easily at the layer level when the clustering is set to false. But we can't use it when the clustering is set to true because the filter is done at the source level. So in the clustering case, you need to use the setData logic and filter yourself. Could you explain the underlying explanation? Are those two processes completely different? or is it better developed when the clustering is false?

2. Filters at the source level can cause issues with the setData logic.

In the following code, I had to remove the filter logic with the clustering mode activated to make the setData function work. Why? How are the two related?

````javascript

// Add a new source from our GeoJSON data and
// set the 'cluster' option to true. GL-JS will
// add the point_count property to your source data.
const sourceName = 'source-' + vl.id
// Warning: we can not set a filter at this level since we use the setdata property
// to filter in an other function. If you use filter here, some logic is broken
this.map.addSource(sourceName, {
type: 'geojson',
data: vl.featureCollection,
cluster: true,
// filter: ["==", ["get", "value"], 1],
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
})

//Later in the code
this.map.getSource(sourceName).setData(filteredData)
````

### Links to related documentation

- [setData](https://docs.mapbox.com/mapbox-gl-js/api/sources/#geojsonsource#setdata)
- [clustering](https://docs.mapbox.com/style-spec/reference/sources/#geojson-cluster)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked setData and clustering documentation, then reproduce the provided addSource and setData sequence in a minimal Mapbox GL JS example. Compare clustered and non-clustered filtering behavior; done means the relationship between source filters, clustering, and setData is explained or the unexpected behavior is confirmed as a fixable bug.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.