I have a single-band, georeferenced .tif file that I would like to display on top of a Leaflet.js map, using the ImageOverlay function. Unfortunately, Leaflet seems only to accept PNG or JPG files, and I haven't been able to produce a PNG file that Leaflet will display.
The original .tif file is in EPSG:102022 and the pixel values are represented by floating-point 64-bit numbers (Float64). Here is a snippet from gdalinfo:
Origin = (-1253000.000000000000000,-3095000.000000000000000)
Pixel Size = (1000.000000000000000,-1000.000000000000000)
Image Structure Metadata:
Band 1 Block=2433x1 Type=Float64, ColorInterp=Gray
Minimum=0.000, Maximum=28.907, Mean=0.574, StdDev=1.419
I transformed the original image from EPSG:102022 to EPSG:4326 using gdalwarp, and that seems to have worked fine. However, when I try to convert the reprojected tif image to a PNG image, I get an error message that the data type has to be changed from Float64 to an unsigned 8 or 16-bit integer. I tried
gdal_translate -ot UInt16 -of PNG <infile> <outfile>
but for some reason it appears to lose a lot of resolution (when I look at in in QGIS) and the resulting PNG file will not display in Leaflet. I also tried an online converter which produced a PNG image that looked good in QGIS but wouldn't display in Leaflet. I can see the bounding box in the correct position on the Leaflet map, but there is just a question mark inside. My Leaflet code is standard, except for substituting a local file path for the URL:
var southWest = L.latLng(-37.0328788,12.7036709),
northEast = L.latLng( -26.8167313,36.5804906),
imageBounds = L.latLngBounds(southWest, northEast);
var imageUrl = '/<local_path_on_my_computer>/image.png';
I've tried lots of variations. I'd also like to be able to control the color scale in the png file and I'm not sure how to do that. I've seen some complicated suggestions using other software to produce tiled layers, but I'm hoping that there's a simpler solution, since this is just a single image.