1

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

4
  • All you need is in the example you are referring to. What have you tried? What didn't work? – TomazicM Feb 18 '20 at 8:12
  • Hi @ANimator120: I'm also using heatmap.js + leaflet-heatmap.js. This has been a while but 'm wondering if you figured this out? For me, the hurdle is getting the x, y values of the heatmap canvas in {'x: x', y: y}. lyr = new HeatmapOverlay(cfg).addTo(map); lyr.setData(data); map.on("mousemove", function (e) { pointval = lyr._heatmap.getValueAt({ x: x , y: y}) }; These x and y values for canvas are not e.layerPoint.x or e.containerPoint.x values. Any thoughts? Thanks – PDash Jul 23 '20 at 5:14
  • @PDash I believe I gave up on this, basically because of the problem you're describing. I don't really think I even got as far as you have gotten, but I think a solution might be found by digging into the way that the leaflet-heatmap.js deals the maps coordinate and the canvas system. In the code for the heatmap, their must be some kind of translation between the two. Best of luck, and let me know if you figure it out! – ANimator120 Jul 23 '20 at 7:09
  • @ANimator120: Hi, thanks. I think I figured it out but it was a pain (basically digging in since I posted the earlier comment). I'm a newbie to heatmaps. The trick, I think, is to work with leaflet panes to access the canvas and find the x and y points. And, nothing to do with the leaflet-heatmap.js library. Will post a response shortly. Cheers – PDash Jul 23 '20 at 7:47
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.