AnswerBun.com

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

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

Geographic Information Systems Asked on December 8, 2021

1 Answers

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!

Related Questions

OpenLayers zoom on a collection of points

1  Asked on June 14, 2021 by jnewman

     

Re-ordering layers before exporting to web map?

2  Asked on June 14, 2021 by jerry-johnson

 

QGIS NetCDF loaded upside down

0  Asked on June 14, 2021 by tbc

     

Loading GeoJSON in OpenLayers?

1  Asked on June 14, 2021 by matixcraft-matixcraft

   

ArcGIS Pro freezes when using Measure tool

0  Asked on June 13, 2021 by arvicola

 

Button on click does not display pie charts

1  Asked on June 13, 2021 by dilettante

     

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.