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.georeferenced PNG image on top of Leaflet

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){

Similar as this Ventusky image.

I need advice how to manage/get data to show on showDataOnMap function. Image of Ventusky.com that shows value on top

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?

  • Do you have a server application, like GeoServer? Aug 26, 2022 at 5:15
  • 1
    Coding question on GIS SE site should include relevant existing code, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code.
    – TomazicM
    Aug 26, 2022 at 6:45
  • 1
    It's not exactly clear from your question what you need, but this Leaflet plugin might help you: leaflet-tilelayer-colorpicker
    – TomazicM
    Aug 26, 2022 at 16:09
  • 1
    Thanks to the developer of the leaflet-tilelayer-colopicker plugin here is the implementation for an imageOverlay gist.github.com/frogcat/8836922bcaa17728bad05276efe7f99f
    – neavilag
    Aug 28, 2022 at 4:23
  • 1
    Nice solution! Now that the question is reopened, it would be good if you publish your solution as an answer, since it could be very useful to others with similar questions.
    – TomazicM
    Aug 28, 2022 at 8:33

1 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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