mapbox / mapbox/mapbox-gl-js

Data driven properties on line-gradient colors

Open
#8,977 28 comments 17 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

## Motivation

As far as I tested for know, it seems not possible to use data driven property to set the color associated with the percentages in the line-gradient / heatmap paint property.
For instance see this API example below :

```
map.addLayer({
type: 'line',
source: 'line',
id: 'line',
paint: {
'line-width': 14,
'line-gradient': [
'interpolate',
['linear'],
['line-progress'],
0, ["get", "src-color"],
1, "["get", "dst-color"]
]
},
});
```
Cheers,
Matthieu.

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 reproducing the API example in the issue and trace how line-gradient and heatmap paint properties handle expression-based colors. Done means data-driven properties can set the colors associated with gradient percentages, with behavior matching the example.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend, web-dev
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.