Implement data-driven styling for line-dash-array

[a-maggioni]

I would like to assign different values to "line-dash-array" property based on the actual data.
Example:
'line-dasharray': [ "case", ['==', ['get', "my_prop"], 'my_value'], ['literal', [0,0]], ['literal', [2,3]] ]

This feature has already been added to Mapbox GL JS >= 2.3.0.
I know that there is a workaround (i.e. duplicate the layer and use a filter) but it would be nice to have this feature also in maplibre.

[HarelM]

Fell free to push this forward and submit a PR. :-)
Note that it's forbidden to copy code from Mapbox v2 and above.

[teifler]

I would like to assign different values to "line-dash-array" property based on the actual data. Example: 'line-dasharray': [ "case", ['==', ['get', "my_prop"], 'my_value'], ['literal', [0,0]], ['literal', [2,3]] ]

This feature has already been added to Mapbox GL JS >= 2.3.0. I know that there is a workaround (i.e. duplicate the layer and use a filter) but it would be nice to have this feature also in maplibre.

If possible could you post a sample of the workaround?

Also will this PR get merged? We would really appropriate that feature

Thanks! :))

[pnorman]

Also will this PR get merged? We would really appropriate that feature

There is no PR - this is an issue.

[a-maggioni]

I would like to assign different values to "line-dash-array" property based on the actual data. Example: 'line-dasharray': [ "case", ['==', ['get', "my_prop"], 'my_value'], ['literal', [0,0]], ['literal', [2,3]] ]
This feature has already been added to Mapbox GL JS >= 2.3.0. I know that there is a workaround (i.e. duplicate the layer and use a filter) but it would be nice to have this feature also in maplibre.

If possible could you post a sample of the workaround?

Also will this PR get merged? We would really appropriate that feature

Thanks! :))

You can create two or more layers with different "line-dasharray" values and set a filter to display one layer or the other based on the actual data.
Example:

"layers": [
    {
      "id": "layer-1",
      "type": "line",
      "metadata": {},
      "source": "sourceId",
      "source-layer": "sourceLayerId",
      "minzoom": 1,
      "filter": ["all", ["==", "my_prop", "my_value"]],
      "layout": {"visibility": "visible"},
      "paint": {
        "line-color": "rgba(0, 0, 255, 1)",
        "line-width": 1,
        "line-dasharray": ["literal", [1, 1]]
      }
    },
    {
      "id": "layer-2",
      "type": "line",
      "metadata": {},
      "source": "sourceId",
      "source-layer": "sourceLayerId",
      "minzoom": 1,
      "filter": ["all", ["!=", "my_prop", "my_value"]],
      "layout": {"visibility": "visible"},
      "paint": {
        "line-color": "rgba(0, 0, 255, 1)",
        "line-width": 1,
        "line-dasharray": ["literal", [1, 3]]
      }
    }
]

[ZeLonewolf]

I would like to attempt a PR for this, as I believe it would enable a significant performance improvement in Americana. If anyone has done any work on this or is currently working on this, please reach out.

[tarwin]

Would really love this as well. Having the same issue as others. Of course could do the workaround but adds overhead. Thank you all for your amazing work !

[teifler]

You can create two or more layers with different "line-dasharray" values and set a filter to display one layer or the other based on the actual data. Example:

"layers": [
    {
      "id": "layer-1",
      "type": "line",
      "metadata": {},
      "source": "sourceId",
      "source-layer": "sourceLayerId",
      "minzoom": 1,
      "filter": ["all", ["==", "my_prop", "my_value"]],
      "layout": {"visibility": "visible"},
      "paint": {
        "line-color": "rgba(0, 0, 255, 1)",
        "line-width": 1,
        "line-dasharray": ["literal", [1, 1]]
      }
    },
    {
      "id": "layer-2",
      "type": "line",
      "metadata": {},
      "source": "sourceId",
      "source-layer": "sourceLayerId",
      "minzoom": 1,
      "filter": ["all", ["!=", "my_prop", "my_value"]],
      "layout": {"visibility": "visible"},
      "paint": {
        "line-color": "rgba(0, 0, 255, 1)",
        "line-width": 1,
        "line-dasharray": ["literal", [1, 3]]
      }
    }
]

This works like a charm thanks!

[berkayoruc]

line-cap also need data driven styling

[HarelM]

Assigning a XL bounty as requested by @Samarth1696 and approved by the MapLibre board.

[Samarth1696]

@HarelM I would like to work on this.

[JacobArrow]

Will this also allow gradients for line-dash-array?

[Samarth1696]

I don't think that would be the scope of this issue. I have multiple ideas in mind regarding lines like performance and other things. As of now, this implementation will not inherently allow gradients specifically for line-dash. If you need to apply gradients to dashed lines, additional work or a separate feature implementation might be necessary to support that functionality.

If gradient support for dashed lines is important for your project, I recommend opening a new issue or feature request after the implementation of data-driven for line-dash to discuss it further with the community.

[Michal-Sw-airspace-intelligence]

Will this also allow gradients for line-dash-array?

Created a feature request for this #5082