Leaflet.heat icon indicating copy to clipboard operation
Leaflet.heat copied to clipboard

Unexpected gradient colors

Open sebastian-raubach opened this issue 6 years ago • 1 comments

I'm confused about the gradient parameter and how it affects the look of the heatmap. In my case the heatmap only seems to be using a very limited range of colors from the ones I've specified.

I've set it up with the options as follows:

{
    radius: 25,
    maxZoom: 12,
    minOpacity: 0.5
    radius: 10,
    max: 1,
    blur: 10,
    gradient: {
        0: "#000000",
        0.2: "#570000",
        0.4: "#ff0000",
        0.6: "#ffc800",
        0.8: "#ffff00",
        1: "#FFFFFF"
    }
}

That's what it looks like: https://i.imgur.com/GWuxnoM.png

The gradient below the map is what I'd expect from a gradient starting from black (0) and running to white (1). However, the colors the heatmap uses only range from about 0.55 to 0.9 (?).

Can anyone explain this? Do I need to adjust my configuration?

sebastian-raubach avatar Aug 08 '17 19:08 sebastian-raubach

Try:

{
    radius: 25,
    maxZoom: 12,
    minOpacity: 0.5
    radius: 10,
    max: 1,
    blur: 10,
    gradient: {
        0: "#000000",
        0.2: "#570000",
        0.4: "#ff0000",
        0.6: "#ffc800",
        0.8: "#ffff00",
        "1.0": "#FFFFFF" , // note the string of the key
    }
}

sanusart avatar Aug 09 '18 10:08 sanusart