mapbox / mapbox/mapbox-gl-js

Feature Request: Layers having state like Features' Feature-State

Open
#10,764 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

## Motivation
Oftentimes when working on Maps with multiple layers I have a need to "dim" or otherwise change a whole layer's paint/layout property dynamically based on user interaction. This is handled by manually calling `setLayout/setPaintProperty`

## Design Alternatives

N/A

## Design
It would be very nice to have a "Layer-State" that works like Feature-State but applied to the whole layer rather than one Feature. This would enable people to build Expressions that change a whole Layer's style with just a call to something like `setLayerState()`.
Another super common use case for this would be toggling a layer on or off with the Visible Layout property.
While it may seem like this design is just exchanging function calls for different functions calls, there are times when I need to change multiple Layout/Paint properties at once to achieve the proper visual effect, and building those changes as Expressions and then simply calling `setLayerState()`. Also, I think this would be a cleaner approach than manually changing the Layout/Paint values in general by making the interaction more state driven rather than effect driven.

### Mock-Up

```
//Add Layer
map.addLayer({
id: "countries",
type: "fill",
source: "country-source",
layout: {
"visibility": [
"case",
["boolean", ["layer-state", "visible"], false],
"visible",
"hidden",
],
},
});

//Toggle Layer off
map.setLayerState("countries", {visible: false});

//Toggle Layer on
map.setLayerState("countries, {visible: true});
```

### Concepts

Same as Feature-State, but for Layers.

### Implementation
I am unfamiliar with the internals of Mapbox.gl, so I am not sure of what the implementation would look like. But if someone were to point me to the best place to start I could definitely take a shot at implementing it.

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 reading the existing Feature-State behavior and how layer layout and paint properties are currently changed. Define the scope of a layer-wide state API, including expression access and visibility toggling, then determine how completion would be tested against the proposed setLayerState() usage.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.