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
        
        
Style lines with a data-driven property

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

      
    

  
  
    

      
        
          
          Line layer (polyline helper)
        
        
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)
        
        
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)
        
        
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.

      
    




      
      

      
        An extension of MapLibre GL JS