mapbox / mapbox/mapbox-gl-js

Data-driven styling a layer with a pre-computed line-gradient ?

Open
#10,107 3 comments 0 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

mapbox-gl-js version: latest

Question

Hello!

I would like to use data-driven properties for a layer with line-gradient property (I don't want to create a layer for each line feature that needs a particular color gradient, for it would be overkill).
I read in the documentation that data-driven properties are not supported for line-gradient, and I'm wondering if this non-support also includes gradients 100% stored as feature properties (as opposed to gradient values picked from feature properties, which is not possible, as mentioned here).

Here's an example of what I'm trying to achieve:

{
    id: 'line',
    type: 'line',
    source: 'line'
    layout: {
        'line-cap': 'round',
        'line-join': 'round'
    },
    paint: {
        'line-color': '#ff0000',
        'line-width': 5,
        'line-gradient': [
            'case',
            ['has', 'averageErrorGradientData'],
            ['get', 'averageErrorGradientData'],
            [
                'interpolate',
                ['linear'],
                ['line-progress'],
                0,
                'blue',
                1,
                'red'
            ]
        ]
    },
};

Thanks!

Links to related documentation

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 line-gradient paint-property documentation and the expression shown in the issue. Determine whether a complete gradient stored in feature properties is supported, distinct from selecting gradient values from feature properties. Done would require a documented answer or a defined implementation path; the issue names no source files or tests.

Written by the indexing model from the issue text.

Assessment

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