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

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

  • 3
    Please show an example of your allHeats array or put up a mimimal working example in codepen, jsfiddle or similar. It is impossible to debug a static image. – John Powell Sep 7 '17 at 7:24
  • I have just updated as you need the allHeats Array data – Devils Dream Sep 10 '17 at 8:54

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:

   movestart: function () { draw = false; },
   moveend:   function () { draw = true; },
   mousemove: function (e) {
      if (draw) {

Here is a screenshot from the jsFiddle:


  • You didn't get my point. I already reveled the issue. If you watch closely the single points all are the same. whereas their value is different they should be in different color. Currently in your demo they represent same value. If you enter 1 for all value the result will be same. I already find out the issue. There is a pull request but that is not committed in the master branch of leaflet.heat. See this discussion and pull request github.com/Leaflet/Leaflet.heat/issues/74 and github.com/Leaflet/Leaflet.heat/pull/78. Thanks – Devils Dream Sep 12 '17 at 6:10
  • 1
    Ok, glad you fixed it. Sorry for missing the point. – John Powell Sep 12 '17 at 6:35
  • Don't be sorry. you tried a lot to help. Thanks again – Devils Dream Sep 12 '17 at 7:14

I already find out the issue. There is a bug which was not fixed in the github master branch of leaflet.heat. Probably owner did't notice. There is a pull request but that is not committed in the master branch of leaflet.heat. See this discussion and pull request where you can find out the solution. Instead of using the master branch the HeatLayer.js use this code of HeatLayer.js for the actual result.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.