mapbox / mapbox/mapbox-gl-js

Set the feature state for all features in a source

Open
#9,709 7 comments 11 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

Sometimes, it is necessary to change the state of all features at once. As an example, let's take a layer with circle elements. We would like to create an effect where clicking on one of the circles will change the color of all the other circles (except for the one that is clicked).

Currently, there are two ways to accomplish this:

  1. Create two layers with different colors and use filters which are triggered by click events. This can be tricky when dealing with click events.
  2. Use queryRenderedFeatures and then loop through each feature in order to set its state. This is incomplete, because queryRenderedFeatures does not retrieve all features.

If one could change all states at once, then a user could use that in order to recolor all circles, and then change the state of the circle that was clicked in order to return that circle to its previous state.

Design Alternatives

Make the id argument optional for setFeatureState(), just like removeFeatureState(). When the id argument is excluded, setFeatureState() would be applied to the entire layer.

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 by tracing the setFeatureState() and removeFeatureState() APIs in the TypeScript codebase and compare their current argument handling. Define how applying state to an entire source should behave alongside the existing feature-specific behavior, then add coverage for updating all features and preserving the clicked feature's override.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.