TransWikia.com

Interactively Display Values of a Heatmap.js leaflet.js Heatmap Layer

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?
enter image description here

One Answer

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP