LineLayer with gradient color from beginning to end

[Danwolve98]

Hello everyone, I'm trying to paint a line with a gradient color like the one in the attached photo. Is there any way to do this?

val route = rememberGeoJsonSource(
                GeoJsonData.JsonString(gson),
                GeoJsonOptions(lineMetrics = true)
            )

I understood that it was necessary to specify lineMetrics as true, but then I applied a gradient and it didn't work. Does anyone know how to achieve this? Thanks in advance.

[sargunv]

You'd want to set the line gradient using some interpolation of lineProgress.

I understood that it was necessary to specify lineMetrics as true, but then I applied a gradient and it didn't work. Does anyone know how to achieve this? Thanks in advance.

What did your gradient expression look like?

A sample JSON expression would be like:

["interpolate",
    ["linear"],
    ["line-progress"],
    0, "blue",
    1, "red"
]

Which is represented in MapLibre Compose as:

interpolate(
    type = linear(),
    input = lineProgress(),
    0 to const(Color.Blue),
    1 to const(Color.Red),
),

[Danwolve98]

I don't know why, but my lineProgress() function wouldn't let me create it as an empty constructor, and when I passed it a value, it just stayed the same.

But I've found a way to do it; I've attached the code snippet. Thanks.

gradient = interpolate(
    type = linear(),
    input = FunctionCall.of("line-progress").cast(),
    0 to const(AppColor.Turquoise.turquoise),
    1 to const(AppColor.Turquoise.turquoise700),
)

[sargunv]

ah, that's a bug, will fix for v0.12.0

[sargunv]

Fixed in #679