mapbox / mapbox/mapbox-gl-js

add/remove filter

Open
#12,113 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature :green_apple:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

## Motivation

It would be nice to make it easier to add/remove expressions from filters. Currently, to create a mask around a single country and filter place labels appropriately, a user would need to parse through and update the `all` expression, which is quite complex in Mapbox core styles.

Current filter in `settlement-major-label`:

```
[
"all",
[
"<=",
["get", "filterrank"],
3
],
[
"match",
["get", "class"],
"settlement",
[
"match",
["get", "worldview"],
["all", "US"],
true,
false
],
"disputed_settlement",
[
"all",
[
"==",
["get", "disputed"],
"true"
],
[
"match",
["get", "worldview"],
["all", "US"],
true,
false
]
],
false
],
[
"step",
["zoom"],
false,
2,
[
"<=",
["get", "symbolrank"],
6
],
4,
[
"<",
["get", "symbolrank"],
7
],
6,
[
"<",
["get", "symbolrank"],
8
],
7,
[
"<",
["get", "symbolrank"],
10
],
10,
[
"<",
["get", "symbolrank"],
11
],
11,
[
"<",
["get", "symbolrank"],
13
],
12,
[
"<",
["get", "symbolrank"],
15
],
13,
[
">=",
["get", "symbolrank"],
11
],
14,
[
">=",
["get", "symbolrank"],
15
]
]
]
```

## Design Alternatives

Without having done it, I assume a combination of `getFilter` and `setFilter` could be used to parse through these long expressions and add a new expression to the `all` array.

## Design

`map.addFilter('my-layer', ['==', ['get', 'name'], 'USA'])`
`map.removeFilter('my-layer', ['==', ['get', 'name'], 'USA'])`

`addFilter` might conflict with `setFilter` so maybe `addToFilter` or `addFilterExpression` would be less confusing

### Concepts

This concept is borrowed from how Mapbox Studio handles data filter "conditions":

![image](https://user-images.githubusercontent.com/12721145/180820191-2fd0c7ab-0a45-4411-bfb4-b94250ed1384.png)

### Implementation

Probably missing a lot of aspects to this, but I assume:

- If there is a filter expression without `all`, then wrap with `all` and insert the expression stated in `addFilter`.
- `addFilter` could potentially insert/build expressions using [logic from here](https://docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/#order-filter-conditions-from-more-specific-to-less-specific)

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

The proposed entry points are getFilter/setFilter and map.addFilter/removeFilter; start by locating those filter APIs in mapbox-gl-js and tracing the existing filter-expression handling. Done means an agreed API and behavior for adding and removing expressions, including the no-all case and ordering considerations, with tests covering the resulting filters.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
api, frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.