Color-code a Leaflet GeoJSON polyline based on additional values [closed]

Question

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?

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
        }
    }
}).addTo(map);

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.