5

I tried to change the line-dasharray settings using the following code,

'line-dasharray': [
    "case", 
    ['==', ['get', "user_class_id"], 'laneway'],[0.2,2],[0.3,2] 
 ]

It gives this error,

Error: layers.gl-draw-line-active.hot.paint.line-dasharray[2][0]: Expression name must be a string, but found number instead. If you wanted a literal array, use ["literal", [...]].

So I fixed the code according to the error advice,

  'line-dasharray': [
      "case", 
      ['==', ['get', "user_class_id"], 'laneway'],['literal',[0.2,2]],['literal',[0.3,2]] 
  ]

And It gives me this error,

evented.js:136 Error: layers.gl-draw-line-active.hot.paint.line-dasharray: data expressions not supported

Do anyone have an idea how to fix this?

Viraj Amarasinghe
  • 911
  • 10
  • 20

2 Answers2

5

See the API documentation at https://docs.mapbox.com/mapbox-gl-js/style-spec/#paint-line-line-dasharray. Data driven styles for line-dasharray isn't supported.

There is an open issue for this support at https://github.com/mapbox/mapbox-gl-js/issues/3045 which you can follow along for updates.

In the meantime you can split this layer into a few layers with different filters to achieve the same result.

AndrewHarvey
  • 2,867
  • 11
  • 21
  • 1
    This is now supported in Mapbox GL as of v2.3 https://github.com/mapbox/mapbox-gl-js/pull/10591 – daamsie Jul 07 '22 at 01:34
3

For anyone looking, data-driven line-dasharrays are supported as of v2.3

Example:

"paint": {
  "line-dasharray": [
    "match", ["get", "property"],
    1, ["literal", [1, 2]],
    2, ["literal", [2, 2]],
    3, ["literal", [3, 2]],
    ["literal", [1, 1]]
  ]
},
"layout": {
  "line-cap": ["match", ["get", "property"], 2, "round", "butt"]
}

From here: https://github.com/mapbox/mapbox-gl-js/pull/10591

daamsie
  • 1,539
  • 10
  • 15