mapbox / mapbox/mapbox-gl-js

How to set "feature-state" value combined with paint "circle-color" property

Open
#12,980 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged docs :scroll:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

I have some circles whose color is decided by real-time data. When the data changes the color will be updated. So want to use "map.setPaintProperty" function to achieve this. Checked the API "feature-state" property may be for dynamic renderer but not know how to combined it with "case" condition expression. The core logic snippet is as below, expect tValue<16, set "feature-state" with "low", tValue>16 and <18, "feature-state" with "middle" and so on. The code pen link is [code pen link](https://codepen.io/gisfinder/pen/JjwxNzN?editors=1010)

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 CodePen and the Mapbox GL JS API documentation for map.setPaintProperty, feature-state, and circle-color. Confirm how the threshold-based state values should drive the real-time color update; done means the example clearly demonstrates the requested behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.