Leaflet.heat
Leaflet.heat copied to clipboard
Unexpected gradient colors
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?
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
}
}