Geographic Information Systems Asked on December 8, 2021
In this example of the heatmap.js tool, I see how the values of the heatmap is returned by using heatmapINstance.getValueAt():
demoWrapper.onmousemove = function(ev) {
var x = ev.layerX;
var y = ev.layerY;
// getValueAt gives us the value for a point p(x/y)
var value = heatmapInstance.getValueAt({
x: x,
y: y
});
tooltip.style.display = 'block';
updateTooltip(x, y, value);
};
I also see that a heatmap instance is created, the “heatmapInstance” that we are using getValueAt() on:
var heatmapInstance = h337.create({
container: document.querySelector('.heatmap'),
// onExtremaChange will be called whenever there's a new maximum or minimum
onExtremaChange: function(data) {
updateLegend(data);
}
});
I’ve created a heatmap layer using heatmap.js’ (see picture below) leaflet-heatmap plugin, how could I display the value of my heatmap layer at the cursor location?
The heatmap display part. I use Leaflet v 1.4.0
var map = L.map('map'); // this is your Leaflet map element; add your init options
map.createPane('heatPane');
lyrHEAT = new HeatmapOverlay(cfg).addTo(map);
lyrHEAT['overlayPane'] = 'heatPane'; // this is critical (I can explain more if needed)
lyrHEAT.setData(yourData);
The value display part
var heatPane = map.getPanes('heatPane').overlayPane; // access the canvas
// now, use mousemove on pane; the leaflet map.on("mousemove", function (e){}) won't help
heatPane.onmousemove = function (e) {
var display_val = lyrHEAT._heatmap.getValueAt({
x: e.layerX,
y: e.layerY
});
// display wherever you like the 'display_val' parameter, either as tooltip or in a div
};
Cheers
Answered by PDash on December 8, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP