Search code examples
javascriptmapboxmapbox-gl-jsmapbox-glmapbox-gl-draw

How to change line-dasharray settings in MapboxGL using user properties?

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?

Solution

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