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
  Min=0.000 Max=28.907 
  Minimum=0.000, Maximum=28.907, Mean=0.574, StdDev=1.419
  NoData Value=-1.69999999999999994e+308

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';

L.imageOverlay(imageUrl, imageBounds).addTo(map);

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.

I'd be grateful for any strategy suggestions.

  • Can you at least display your PNG image on your web page through an <img src="/local_path/image.png" /> tag?
    – ghybs
    Jul 22, 2016 at 11:28

3 Answers 3


For tricky (and scriptable) image manipulation, my tool of choice is ImageMagick.

It's not a particularly easy-to-learn tool, but it can do things like changing the bit depth of images, or convert from grayscale to a colour ramp, control the number of channels of the output file (RGB/greyscale/etc), or anything, really. With a bit of work, it should be able to do things like automatically trim the range of values from the GeoTIFF and map that to 8-bit channels.

Please note that ImageMagick (and GIMP, for this matter) strip the GeoTIFF information off the files. Use listgeo and geotifcp if you need to preserve that information.

Also, you mention

...and the resulting PNG file will not display in Leaflet

What happens if you try to load that file directly in your web browser? Also, double-check uppercase/lowercase filenames!


You say you would also like to be able to control the colour scale in the PNG file. You could change the colour scale of the GeoTIFF before converting it to a PNG.

I was able to convert grayscale to colour using gdaldem color-relief

Changing color of raster images based on their data values - gdal



The GIMP never let me down when converting any image files. I can't really promise it will work, but it's free so it can't hurt to try.

It supports TIF and TIFF, and has countless ways to automatically and/or interactively manipulate image-colors.

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.