Leaflet / Leaflet.heat

A tiny, simple and fast heatmap plugin for Leaflet.
http://leaflet.github.io/Leaflet.heat/demo
BSD 2-Clause "Simplified" License
1.55k stars 525 forks source link

Unexpected gradient colors #87

Open sebastian-raubach opened 7 years ago

sebastian-raubach commented 7 years ago

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?

sanusart commented 6 years ago

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
    }
}