0

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?

Ezgi
  • 23
  • 1
  • 5
Vladimir Kalachikhin
  • 39
  • 5
  • 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 '22 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? - https://leafletjs.com/examples/choropleth/ – Cary H Oct 17 '22 at 18:27
  • Be careful: there is no problem with solid color. See style option of L.GeoJSON object. – Vladimir Kalachikhin Oct 18 '22 at 08: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 '22 at 09:05

1 Answers1

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.

Vladimir Kalachikhin
  • 39
  • 5