[GIS] Intensity Wise Gradient is not working in leaflet.heat

heat mapleaflet

I am using leaflet.heat for creating heatmap with leaflet API.I have a highest intensity of 1.0 and lowest 0.0. When I am drawing a heatmap in the highest zoom its all are showing the same color. I have plotted the value over the heat color. Here you can see what I am getting in the attached Image. Here is the code I am using. Seems like Intensity is not working and using all value as same.

var heatmap = L.heatLayer(allHeats, {
                radius: 20,
                max: 1.0,
                blur: 15,              
                gradient: {
                    0.0: 'green',
                    0.5: 'yellow',
                    1.0: 'red'
                },
                minOpacity: 0.7
            }).addTo(map);

allHeats Array data 

[23.703161, 90.414101, 1],
[23.722657, 90.412525, 0.6],
[23.701936, 90.415782, 0.5],
[23.722099, 90.413981, 0.9],
[23.703582, 90.414536, 0.3],
[23.699689, 90.421493, 0.1],
[23.705727, 90.412281, 0.8],
[23.720692, 90.414056, 0.2],
[23.706133, 90.412448, 0.8],
[23.704677, 90.41166, 0.7],
[23.703912, 90.413993, 0.4]

enter image description here

Best Answer

There is nothing wrong with Leaflet.heat, as far as I can see. I think you have too few points and too small a radius for any meaningful spots to be formed by the heatmap. I have created a working example in jsFiddle, which also incorporates the example from the leaflet.heat github demo page, whereby on mouse over, points are added to the heatmap. You can see from this, that the heatmap code is working. I think, for such a small number of points as you have, you probably want to increase the radius to something like 30, so that more points are considered part of each cluster.

Here is the additional code from draw.html:

map.on({
   movestart: function () { draw = false; },
   moveend:   function () { draw = true; },
   mousemove: function (e) {
      if (draw) {
         heatmap.addLatLng(e.latlng);
      }
   }
})

Here is a screenshot from the jsFiddle:

heatmap

Related Question