Allow for line-gradient usage together with line-dasharray

[Michal-Sw-airspace-intelligence]

As suggested by: #1235 (comment)

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.

User Story

As a developer, I can use line-gradient together with line-dasharray to style lines with both gradients and dashed patterns, so that I can create visually complex and appealing line styles in my application.

Rationale

Why is this feature needed?

Combining line-gradient with line-dasharray enables developers to create more intricate and visually engaging designs, such as gradient-colored dashed lines that can enhance the appearance of maps or visualizations.

Example use cases:

• Visualizing a route with a gradient that diverges at a certain point, using a dashed pattern to indicate that it represents an alternative path to the same destination.
• Representing dynamic data like network traffic where color gradients show intensity, and dashes denote sections with interruptions.

Can it be done today? Is there a workaround?

• Currently, this combination is not possible, forcing developers to choose between using gradients or dashed patterns. Workarounds, such as overlaying two separate lines, are complex, inefficient, and often visually unsatisfactory.

Impact

What if we do nothing?

Developers will continue to face limitations in line styling

Example:

    paint: {
      'line-width': ['get', width],
      'line-gradient': [
        'interpolate',
        ['exponential', 2],
        ['line-progress'],
        0,
        'rgba(255, 41, 41, 1)',
        0.15,
        'rgba(255, 173, 173, 1)',
        0.85,
        'rgba(0, 44, 133, 1)',
        1,
        'rgba(0, 85, 255, 1)',
      ],
      'line-dasharray': [0.1, 1.4],
    },

[HarelM]

Can you add a visual example of how this would look along with a style definition (mockup)?

[Michal-Sw-airspace-intelligence]

Can you add a visual example of how this would look along with a style definition (mockup)?

Sure, added into the description

[JacobArrow]

Not that it matters much, but Mapbox already has this feature, and I really hope we can get it in Maplibre aswell.