CODEWITHSUNDEEP
javascriptcolorsgradientmapboxmapbox-gl
cpd
cpd

Reputation: 765

Use a color gradient for a line with Mapbox

How would I change the line-color using Mapbox GL JS to render (from start to finish) using a color gradient instead of a single color?

    map.addLayer({
        'id': 'walking-line',
        'type': 'line',
        'source': 'walking',
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': '#088',
            'line-width': 5
        }
    });

Is this possible? I would prefer not to alter the geojson file.

Upvotes: 1

Views: 4097

Answers (3)

Marc
Marc

Reputation: 1430

You can use the line-gradient property.
See documentation: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-line-line-gradient

A complete example of usage is available on official documentation here: https://docs.mapbox.com/mapbox-gl-js/example/line-gradient/

Upvotes: 0

Muhammad Haseeb
Muhammad Haseeb

Reputation: 1341

Try this

map.addLayer({
            'id': 'walking-line',
            'type': 'line',
            'source': 'walking',
            'layout': {
                'line-join': 'round',
                'line-cap': 'round'
            },
            'paint': {
                'line-color': 'red',
                'line-width': 5,
    'line-gradient': [
                    'interpolate',
                    ['linear'],
                    ['line-progress'],
                    0, "blue",
                    0.1, "royalblue",
                    0.3, "cyan",
                    0.5, "lime",
                    0.7, "yellow",
                    1, "red"
                ]
            }
        });

Upvotes: 2

Joe Duncan
Joe Duncan

Reputation: 376

This is not (yet) supported. See: https://github.com/mapbox/mapbox-gl-js/issues/4095

Upvotes: 1

Related Questions