CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-jsmapbox-glmapbox-gl-draw
Viraj Amarasinghe
Viraj Amarasinghe

Reputation: 941

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?

Upvotes: 6

Views: 7808

Answers (2)

daamsie
daamsie

Reputation: 1607

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

Upvotes: 5

AndrewHarvey
AndrewHarvey

Reputation: 3055

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.

Upvotes: 5

Related Questions