Multiple heatmaps

[Robinfr]

It doesn't seem to be possible to have multiple heatmaps on one page?

[pa7]

It is possible. e.g. look at the heatmap.js homepage: http://www.patrick-wied.at/static/heatmapjs/
There's one heatmap in the hero area ( click on it and it will regenerate the heatmap ) and another one if you click on "Activate Website Heatmap".

[Robinfr]

Do all elements that the heatmap applies to need to have a seperate ID? Because I'm creating a heatmap for elements that all have the same class.

[Robinfr]

Never mind figured out, had a scope issue. Thanks for replying 👍

[mmontes11]

Hei,

Is it possible to have multiple heatmapjs layers in the same leaflet map with different styles?
I guess no

[dgorissen]

@pa7 is your answer still correct? Im finding that with the leaflet plugin even just creating a second HeatmapOverlay instance the first one (which is shown properly) just disappears:

` var cfg = {
radius: 35,
maxOpacity: .9,
scaleRadius: false,
useLocalExtrema: false,
latField: 'lat',
lngField: 'lon',
valueField: 'kurt'
};

var heatmapLayer =  new HeatmapOverlay(cfg);
var heatmapLayer2 =  new HeatmapOverlay(cfg);  -> simply adding this line with no other change breaks the first layer

`

[mmontes11]

I have the same problem @dgorissen

The library is awesome but I miss that functionality @pa7

[pa7]

@dgorissen that's interesting. have you tried creating an overlay, then adding it, then creating the second overlay and adding it?
Another thing: try creating a copy of the config object and pass it to the overlay, it's very likely to be a referencing issue (because I do set a container attribute at the config obj which will be overwritten if you use the same object). That's a problem that has to be fixed

[dgorissen]

@pa7 thanks for the response.

Interestingly using a separate config object indeed prevents the first heatmap from breaking and it seems to show normally.

I can never get the second one to show though, regardless of the order I create / add them. As soon as the second one is created it breaks the first.

I would hope its a small referencing related fix, it really would be useful to be able to have multiple heatmaps on the same map instance.

[dgorissen]

@pa7 any pointers on how to potentially fix/hack around this?

[luisOscarMendoza]

@pa7 , @dgorissen , @mmontes11, @Robinfr ,
Hi, I had the exact same problem and after a lot of R&D I was able to create multiple heatmap layers with different styles and one above another.
My approach is this:

1. I created and array of styles based on the ammount of heatmaps I want to create
   1.1. Each "conf" element has the specific style that I want for each heatmap
2. Then I create the heatmaps and saving the instances into another array to be able to access each heatmap based on my criteria.
3. I add the points to each heatmap and my dots will be represented with different colors.

Here it is how it looks

Here it is how the code should look like

function drawHeatmaps(){
var nHeatmaps = 5;
var heatmapInstances = {};
var configs = {};
for (var i =0;i<nHeatmaps;i++){
var idHeatmap = "heatmap"+i; //I create the id for the heatmap
if (heatmapInstances[idHeatmap]===undefined){ //I create the heatmap
configs[idHeatmap] ={
container: document.getElementById(idDiv),
blur: 0,
gradient: getGradient(i), //The function get gradient creates the style for each heatmap
};
heatmapInstances[idHeatmap] = h337.create(configs[idHeatmap]);
}
points = [];
for (var j=0; j<nPoints;j++){ //I create the points array for the heatmap
var point = {
x: devices[i].points[j].x,
y: devices[i].points[j].y,
value: devices[i].points[j].value
};
}

 var data = {
      max: 50,
      min: 0,
      data: points
 };
 heatmapInstances[idHeatmap].setData(data);

}
};

function getGradient (number){
var gradient;
var colorsArray =['DeepSkyBlue','purple','red','Orange','green','blue','purple','gray','brown','black','cyan'];
var num; /To avoid that we receive a number higher thant the number of colors we have we just perform an operation to look the numbers from 0 to colorsArray.length/
num = (number / colorsArray.length) >> 0;
num = number - (colorsArray.length*num);
gradient = {
'1': colorsArray[num],
'0': 'white',
};
return gradient;
};

If you have questions please let me know and good luck!

[zhukovRoman]

@dgorissen @pa7 do you solve this problem? I cant add two heatmap on one map.
I have two separeted config objects:

cfgPositive = {…}
cfgNegative = {…}

now, i try add both heatmaps on leaflet map:

@heatLayerPositive = new HeatmapOverlay(cfgPositive)
@heatLayerNegative = new HeatmapOverlay(cfgNegative)

@heatLayerNegative.setData({max:1, data:negativePoints})
@heatLayerNegative.addTo(map)

@heatLayerPositive.setData({max:1, data:positivePoints})
@heatLayerPositive.addTo(map)

In web console i see, that map-object have two layer with different data and cfg, but i have seen only first layer.

Do you have any solution?

[zhukovRoman]

problem was in styles. In my DOM-tree i find correct layer, than been under map div.
I set style
display: absolute !important;
in my css file and all work fine

[ssilwa]

@zhukovRoman
Hello, can you please explain a little more about your solution?
Currently, I have

<div style="position: relative; height: 600px; width: 800px; display: absolute !important;" class="heatmap" id="map-canvas">
      </div>

but the second layer is not showing up.

[zhukovRoman]

@ssilwa
Hello. You can find DOM-nodes inside your <div id="map-canvas"> with class leaflet-zoom-hide. canvas tag of your heatmaps are Inside this nodes.

and I simply add style
.leaflet-zoom-hide { position: absolute!important; }

and all works fine for me.

[ssilwa]

@zhukovRoman Sorry, can you be clearer? I am not sure where I should add that style.

[pa7]

@ssilwa add it somewhere after the leaflet stylesheet so it will override the leaflet style.

[ssilwa]

@pa7 @zhukovRoman
I have

    <div style = "position: absolute!important;" class = "leaflet-zoom-hide" id = "map"></div>

after the leaflet style sheet but only the first layer is showing. Here is my code for the layers:

        var heatmapLayer = new HeatmapOverlay(cfg1);

        var heatmapLayer2 = new HeatmapOverlay(cfg2);

        var map = new L.Map('map', {
          center: new L.LatLng(25.6586, -80.3568),
          zoom: 4,
          layers: [baseLayer, heatmapLayer]
        });

        heatmapLayer.setData(testData2);
        heatmaplayer.addTo(map);
        heatmapLayer2.setData(testData);
        heatmaplayer2.addTo(map);

Is it an issue there ?

[zhukovRoman]

@ssilwa
in the HEAD part of your html page insert after <link rel='leaflet.css'>
the following lines

<style> .leaflet-zoom-hide { position: absolute!important; } </style>

Now, in any place inside BODY tag place map container:

<div style="position: relative; height: 600px; width: 800px;" class="heatmap" id="map-canvas"</div>

and use heatmap as you described above.

If problem will still, please, provide some jsfiddle example with minimal working code.

[ssilwa]

@pa7 @zhukovRoman Ok, it seems to work! Thank you again! Btw, I think an example of this should be added to the examples page sometime in the future! It is a really cool functionality!

[pa7]

@ssilwa thank you for the feedback, I will add an example with multiple layers soon :)

[LoganDupont]

Any update on this issue @pa7

[ivangermanov]

@ssilwa thank you for the feedback, I will add an example with multiple layers soon :)

Any update?