I almost repeated Color-code a Leaflet polyline based on additional values, e.g. altitude, speed, because after more than eight years, I have not found a satisfactory answer.

I need a gradien color of a GeoJSON LineString object.

The style option of L.GeoJSON object allows to specify only solid color.
The available extensions allow creating only an L.Polyline object with gradient color (this and this, for example).

But I update my line dynamically in real time, so it should be an L.GeoJSON object.

Can anyone suggest an idea or solution how to make a gradient color of the line exactly in a L.GeoJSON object?

  • 1
    Coding question on GIS SE site should include relevant existing code, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code. Add also references to available extensions that allow L.Polyline with gradient color.
    – TomazicM
    Oct 17 at 15:02
  • Can you split your single line into segments that each contain a property that you want to colorize? Then use the example here? - leafletjs.com/examples/choropleth
    – Cary H
    Oct 17 at 18:27
  • Be careful: there is no problem with solid color. See style option of L.GeoJSON object. Oct 18 at 8:04
  • 1
    Please edit your question and add code how you define/create your GeoJSON layer and how you update it dynamically.
    – TomazicM
    Oct 18 at 9:05

1 Answer 1


Both mentioned projects use an custom L.Renderer for coloring a polyline segments. You can using this renderer (if it is possible) to color the GeoJSON object via the style option as follows:

var polyline = L.geoJSON(geoJSONdata,{
    style: function(feature){
        return {
            renderer: new L.Renderer.RendererGradient(),
            colors: colorsArray, // options for renderer
            weight: 5 // options for polyline

Here we use a renderer from leaflet-polycolor that allows do it.

However, I extracted the renderer from leaflet-polycolor and put it in a separate git repo because the size of the renderer alone is almost four times smaller than the entire project. The comments and samples included.

But it seems to me that using a renderer is an overkill for such task. But there is no other way.

Not the answer you're looking for? Browse other questions tagged or ask your own question.