Open Robinfr opened 10 years ago
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".
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.
Never mind figured out, had a scope issue. Thanks for replying :+1:
Hei,
Is it possible to have multiple heatmapjs layers in the same leaflet map with different styles? I guess no
@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
`
I have the same problem @dgorissen
The library is awesome but I miss that functionality @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
@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.
@pa7 any pointers on how to potentially fix/hack around this?
@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:
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!
@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?
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
@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.
@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.
@zhukovRoman Sorry, can you be clearer? I am not sure where I should add that style.
@ssilwa add it somewhere after the leaflet stylesheet so it will override the leaflet style.
@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 ?
@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.
@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!
@ssilwa thank you for the feedback, I will add an example with multiple layers soon :)
Any update on this issue @pa7
@ssilwa thank you for the feedback, I will add an example with multiple layers soon :)
Any update?
It doesn't seem to be possible to have multiple heatmaps on one page?