mapbox / mapbox/mapbox-gl-draw

Unable to use line-gradient paints styles for lines

Open
#858 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

api feature
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
  1. 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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.