Folium: heat map plugin creating incorrect output

[achourasia]

The heat map plugin is not generating correct output, to test I have added 6 points with a weight and color gradient. The expected output should have these points at different colors

Any ideas what may be going wrong? I suspect underlying js works on count and ignore weights

import folium
from folium import plugins

m = folium.Map(location=[43.46811941, -90.04569087], zoom_start=5)
data = [[42.35810000, -71.06360000, 0.3],
        [42.82995815, -74.78991444, 0.4],
        [43.17929819, -78.56603306, 0.5],
        [43.40320216, -82.37774519, 0.6],
        [43.49975489, -86.20965845, 0.7],
        [43.46811941, -90.04569087, 0.8],]
# Uncommenting following does not work either
# append 0.0 and 10 to check if color scaling works correctly
# data.append([0,0,0.0])
# data.append([0,0,1.0])
# define color map

colormap = {0.0: 'pink', 0.3: 'blue', 0.5: 'green',  0.7: 'yellow', 1.0: 'red'}
m.add_children(plugins.HeatMap(data, min_opacity=1, max_val=1.0, gradient=colormap))
m.save('123.html')` 

[achourasia]

This is a bug in underlying heat_map.js implementation
Fiddle with incorrect output using heat_map.js: https://jsfiddle.net/y20js9nm/13/
Fiddle with correct output using heatmap.js: https://jsfiddle.net/pz4usuLe/40/

I have filed a bug report https://github.com/Leaflet/Leaflet.heat/issues/70
Closing this issue it is not a folium bug.

[ocefpaf]

Thanks for tracking this down @achourasia!

[achourasia]

We should add another template for heatmap.js which does the right thing and has a plugin for leaflet. Note the current library and the one I mention have similar names heat_map.js (creates incorrect output) vs heatmap.js (creates correct output)

Here are the links
Heatmap.js: https://github.com/pa7/heatmap.js
Leaflet plugin: https://github.com/pa7/heatmap.js/tree/master/plugins

[ispmarin]

Is there a workaround for now? A way to replace only the heatmap javascript library?

[achourasia]

Workaround will be to add a new plugin with the original heatmap.js library.

[stakats]

Still no movement at Leaflet.heat. Is there a practical workaround for folium users to use the original working heatmap.js library? Or is there a working plugin up anywhere? Many thanks.

[johanbog]

@stakats Did you manage to find a workaround?

[ghost]

yet?

[nschiraldi]

Any updates on this?

[DavidMaer]

Hello I'm using heatmap plugin of folium in python. And it is generating an incorrect map by ignoring the weights. How couldI fix this problem in Python?

[redandinvisible]

+1

Leaflet.heat looks abandoned. Last commit was 4 years ago

[SungmanHong]

Is it possible to set gradient as transparent?

[Clemmarchal]

The heat map plugin is not generating correct output, to test I have added 6 points with a weight and color gradient. The expected output should have these points at different colors

Any ideas what may be going wrong? I suspect underlying js works on count and ignore weights

import folium
from folium import plugins

m = folium.Map(location=[43.46811941, -90.04569087], zoom_start=5)
data = [[42.35810000, -71.06360000, 0.3],
        [42.82995815, -74.78991444, 0.4],
        [43.17929819, -78.56603306, 0.5],
        [43.40320216, -82.37774519, 0.6],
        [43.49975489, -86.20965845, 0.7],
        [43.46811941, -90.04569087, 0.8],]
# Uncommenting following does not work either
# append 0.0 and 10 to check if color scaling works correctly
# data.append([0,0,0.0])
# data.append([0,0,1.0])
# define color map

colormap = {0.0: 'pink', 0.3: 'blue', 0.5: 'green',  0.7: 'yellow', 1.0: 'red'}
m.add_children(plugins.HeatMap(data, min_opacity=1, max_val=1.0, gradient=colormap))
m.save('123.html')` 

I know this issue is old but this may be usefull for other people :

Your min_opacity is at 1 so there is no possible gradiant. Your minimum values will be displayed with the same opacity as your maximum value.
Try this code instead :

```python
import folium
from folium import plugins

m = folium.Map(location=[43.46811941, -90.04569087], zoom_start=5)
data_test = [[42.35810000, -71.06360000, 0.1],
[42.82995815, -74.78991444, 0.2],
[43.17929819, -78.56603306, 0.4],
[43.40320216, -82.37774519, 0.6],
[43.49975489, -86.20965845, 0.8],
[43.46811941, -90.04569087, 1],]

Uncommenting following does not work either

append 0.0 and 10 to check if color scaling works correctly

data.append([0,0,0.0])

data.append([0,0,1.0])

define color map

colormap = {0.0: 'pink', 0.3: 'blue', 0.5: 'green', 0.7: 'yellow', 1: 'red'}

gradient=colormap,

m.add_child(plugins.HeatMap(data_test , min_opacity = 0, max_val = 0.00025, gradient=colormap, blur=1))
```

The base gradiant seems to have fixed values that go between 0 and 4000. So 0 is pink and 4000 is red in your gradiant. In order to display the values between 0 and 1, you have to put max_val at 0.00025.