mapbox / mapbox/mapbox-gl-draw
Unable to use line-gradient paints styles for lines
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 612
- Avg merge
- 8d 9h
- Merged PRs (30d)
- 5
Description
mapbox-gl-js version: 0.52
mapbox-gl-draw version: 1.1.1
Steps to Trigger Behavior
- Set a line-gradient value in a paint object of a line style.
{
id : 'gl-draw-line-static-gradient',
type : 'line',
filter : ['all', ['==', '$type', 'LineString'], ['==', 'mode', 'static']],
paint : {
'line-color' : 'red',
'line-width' : 10,
'line-gradient': ['interpolate', ['linear'], ['line-progress'], 0, 'blue', 0.1, 'royalblue', 0.3, 'cyan', 0.5, 'lime', 0.7, 'yellow', 1, 'red'],
},
layout: {
'line-cap': 'round',
'line-join': 'round',
},
},
Expected Behavior
Get a nice line with a gradient from green to red.
Actual Behavior
Get an error message:
Error: layers.gl-draw-line-static-gradient.cold: layer "gl-draw-line-static-gradient.cold" specifies a line-gradient, which requires a GeoJSON source with lineMetrics enabled.
at Object.Jr [as emitValidationErrors] (mapbox-gl.js:29)
at De (mapbox-gl.js:33)
at i._validate (mapbox-gl.js:33)
at i.addLayer (mapbox-gl.js:33)
at r.addLayer (mapbox-gl.js:33)
at ctx.options.styles.forEach.style (setup.js:102)
at Array.forEach ()
at Object.addLayers (setup.js:101)
at r.connect (setup.js:35)
at r.ht.fire (mapbox-gl.js:29)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the supplied style and tracing the setup.js addLayers/connect path shown in the error stack. Inspect how the GeoJSON source is configured relative to the lineMetrics requirement, then verify completion by confirming the line style is added without a validation error and renders the requested gradient.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100