3

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

2
  • 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. Sep 7, 2017 at 7:24
  • I have just updated as you need the allHeats Array data Sep 10, 2017 at 8:54

2 Answers 2

2
+25

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

0
2

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 and acknowledge you have read our privacy policy.

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