Lately I've been working on heat maps using the leaflet.heat plugin.

I have a set of points in the WGS84-system with the following structure:

latitude | longitude | weighting | type

The weighting-attribute is currently set to 1 so it will not influence the occurence of the heat map.

The type-attribute defines, by an number, which type of animal the dataset is about, let's say 1 stands for zebras and 2 for lions.

There is no problem in displaying these two heat maps seperately (as in the first two pictures), however when I'm trying to display both maps simultaneously it doesn't fit my expectations (third picture).

What I'm interested in is the area where those two heat maps overlay, namely in the middle of northern and southern lakeside, this is the area that should be highlighted the most.

Is there any way to do this with this plugin?

enter image description here

  • 1
    As a combined heat map of the two inputs, the result you show here actually seems pretty reasonable. The intensity does increase in the areas of overlap between the two data sets, but these areas do not stand out because each of the inputs has higher densities elsewhere. If your main goal is to highlight the areas of overlap, one option is to isolate the points in those areas first and weight them higher than the others. Another is to convert each set of points to a polygon using something like a concave hull routine and display the overlapping polygons with some transparency. May 10, 2016 at 17:09
  • Thanks for your response! My main goal is indeed to highlight the overlapping areas. I kind of like your first idea of isolating those points, I'm quite new to JavaScript and Leaflet though. Could you give me a first approach on how to do this? Should I add a function in the plugin itself or just search those points within a loop or something like that?
    – yuno
    May 10, 2016 at 18:30
  • One way would be to loop through the points and calculate distances between each point and all points of the other group, keeping track of the smallest distance for each point. Then, you'd keep any point where this smallest distance is less than some threshold. Another way would be to use something like Turf.js. For this, the workflow would probably involve creating a concave hull for each group of points, calculating the intersection of the hulls, then extracting all points that are within the intersection polygons. I'll try to put up an example as an answer later today. May 10, 2016 at 19:39
  • Your first solution worked just fine for me - I'm looping through all the points an calculate the distance between them and only keep those within a certain margin, let's say 300 m. This is quite static though, assuming I have point data of a whole country, there might not any points be kept - how could I work around this?
    – yuno
    May 10, 2016 at 21:33
  • Glad to hear you got it working! For the whole-country scenario, do you just mean that the point spacing would be too sparse at that scale? May 11, 2016 at 2:36

1 Answer 1


If you look at the plugin code, you will see that the plugin first generates a canvas raster with opacity values corresponding to the values of each cell. The opacity is then transformed into colour. Maybe you could rewrite specific parts of the plugin, so that for every layer the opacity value = (Value)/(number of layers). Then you could add the different heatmap values of the corresponding cells to generate a new heatmap.For two layers (like you mention) this would mean that all cells of the final heatmap where only 1 layer is found (everything except overlaps) would have values of 0 - 0.5 and all areas with overlap can have values ranging from 0 - 1.

Another idea would be to first calculate the overlapping areas (maybe calculate the alpha-hull of each layer and then calculate the overlap; alpha-hull: https://github.com/mikolalysenko/alpha-shape) and once you have the overlapping areas, calculate point in polygon. Then you should have all points in a general overlapping area, of which you could change the weight to 2. These are just a conceptual ideas and have not been tested...

If you are looking for IDW, I have created an IDW plugin for Leaflet which you can play around with: https://github.com/JoranBeaufort/Leaflet.idw/ but I do not think this will solve your problem.

For your comment on making it more dynamic with the distance attribute, you could tie the distance threshold to the max or average distance between points in your data set.

Ps. This would be better fitted as a comment, but the reputation system does not allow me to comment.

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.