Comments (22)
@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.
from heatmap.js.
@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
`
from heatmap.js.
@ssilwa thank you for the feedback, I will add an example with multiple layers soon :)
from heatmap.js.
@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.
from heatmap.js.
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
from heatmap.js.
@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 ?
from heatmap.js.
@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!
from heatmap.js.
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".
from heatmap.js.
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.
from heatmap.js.
Never mind figured out, had a scope issue. Thanks for replying 👍
from heatmap.js.
Hei,
Is it possible to have multiple heatmapjs layers in the same leaflet map with different styles?
I guess no
from heatmap.js.
I have the same problem @dgorissen
The library is awesome but I miss that functionality @pa7
from heatmap.js.
@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
from heatmap.js.
@pa7 any pointers on how to potentially fix/hack around this?
from heatmap.js.
@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:
- 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 - Then I create the heatmaps and saving the instances into another array to be able to access each heatmap based on my criteria.
- 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!
from heatmap.js.
@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?
from heatmap.js.
@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.
from heatmap.js.
@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.
from heatmap.js.
@zhukovRoman Sorry, can you be clearer? I am not sure where I should add that style.
from heatmap.js.
@ssilwa add it somewhere after the leaflet stylesheet so it will override the leaflet style.
from heatmap.js.
Any update on this issue @pa7
from heatmap.js.
@ssilwa thank you for the feedback, I will add an example with multiple layers soon :)
Any update?
from heatmap.js.
Related Issues (20)
- 'TypeError: offset required' when using Heatmap.js with local tests HOT 1
- Blur disappears after seconds
- 如何清空渲染的数据 HOT 3
- Make datapoint disapear after some time? HOT 1
- TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element HOT 1
- All points whose radii overlap the view should be rendered
- Loaded longitude and latitude HOT 4
- setData bug HOT 1
- I issued this by mistake, please remove it.
- How to use in a backend Node JS environment? HOT 1
- leaflet heatmap - crash when zoom out
- Issue when set value 0 for dataPoints
- heatmap issue on certain phones/browsers
- Cannot remove the heatmap layer HOT 1
- setData problem in chrome
- How to use Heatmap Animation Example? HOT 1
- How to avoid the warning about Canvas2D in the browser's console
- img.data is read-only, and assigning to it throws a TypeError in strict mode HOT 1
- ImageData data assignment in Strict Mode 2.0.5 HOT 1
- Is this project still alive? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from heatmap.js.