Is it possible to load a raster file (e.g. GeoTIFF or Erdas img) directly into a Leaflet map? If so, can you guide me to the correct documentation or method to do this?

I am trying to do this with the imageOverlay() function in Leaflet currently.

var imageUrl = 'http://localhost/test/my_raster.tif',
        imageBounds = [[30.430224, -87.193133], [30.435867, -87.185944]];
        L.imageOverlay(imageUrl, imageBounds).addTo(map); 

I am new to Leaflet.


2 Answers 2


Web browsers have support for a limited list of image formats. They all support JPEG and PNG formats, and there's growing support for WebP.

Up to this date, no web browser supports TIFF images. Do not expect any of the other raster file types to be supported natively in any web browser.

The approaches to this problem are:

  • Convert your raster data to either JPEG or PNG. This has the disadvantage of bigger file sizes (in bytes) and more work on preparing the data.

  • Rely on browser plugins (such as TIFF viewer for Firefox). This means any users would need to install that plugin in their browsers.

  • Rely on Leaflet plugins such as leaflet-geotiff (or others in the Leaflet plugins list). This means that javascript will run each time to decode the TIFF images.


I just found the plugin georaster-layer-for-leaflet, it's so amazing. https://github.com/GeoTIFF/georaster-layer-for-leaflet

  • 3
    This does not really answer the question. It is always recommended to include a detailed answer rather than a link-only answer. Link-only answers are not good answers. It also smells like spam. Jan 7, 2023 at 13:48

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.