Create a gradient line using an expression

Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.

Related examples

Style lines with a data-driven property

Example

Create a visualization with a data expression for line-color.

Line layer (polyline helper)

Example

This example shows how to add a line layer to the map using the polyline layer helper.

Style a GeoJSON Line layer (polyline helper)

Example

This example shows how to add and style a GeoJSON line layer to the map using the polyline layer helper.

Line color ramp symbol (polyline helper)

Example

This example shows how to add a line layer with a color ramp symbol that changes the line color based on the map zoom level using the polyline layer helper.