Getting L.imageOverlay raster layer pixel value at coords in Leaflet?

Question

I have already processed rainfall data and generated a PNG from GeoTIFF to overlay on top of Leaflet using L.imageOverlay

var x1=-115; 
var x2=-59; 
var y1=30; 
var y2=6;

var imageBounds = [
    [y2, x1],
    [y1, x2]
  ];
var imageUrl = 'https://cloud1.on.gt/data/star/ghe_12h.png',
L.imageOverlay(imageUrl, imageBounds).addTo(map);

see image.

I will like to have a feature where I click on a location and get the data value of the pixel. I use PNG because is fast and easy to display on map. But data can be obtained from GeoTiff where I generated the PNG from, or I can generate an XYZ text file from it with GDAL and then export as GeoJSON using OGR2OGR. See image below as example.

Something like this:

map.on('click', function(e){
    showDataOnMap(e.latlng);
});

Similar as this Ventusky image.

I need advice how to manage/get data to show on showDataOnMap function.

Attempted this idea to overlay transparent GeoJSON to click and get the value but seems not efficient as is a lot of points and map lags or becomes unresponsive.

What is the best approach to achieve this?

Answer 1

Based on the suggestion of @TomazicM about the use of https://github.com/frogcat/leaflet-tilelayer-colorpicker, the creator of that plugin posted the following solution:

Color picker for L.ImageOverlay is easy and simple. Try bellow.

Code https://gist.github.com/frogcat/8836922bcaa17728bad05276efe7f99f Demo https://bl.ocks.org/frogcat/raw/8836922bcaa17728bad05276efe7f99f/?raw=true