7

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.

nmtoken
  • 13,355
  • 5
  • 38
  • 87
geo derek
  • 505
  • 1
  • 4
  • 19
  • 1
    Did you try converting it to jpeg? Some say this works on the client side. http://stackoverflow.com/a/16311760/125400 – Kirk Kuykendall Apr 14 '16 at 15:44
  • I just converted it and it worked. Thanks for the tip. I used the following thread to see how to convert it with gdaltranslate. I am thinking that this isn't the best method for putting raster on a Leaflet map, but that I should rather be using a map or tiling service of some kind. – geo derek Apr 15 '16 at 00:55
  • 2
    Just as a reference for future readers. For small rasters you can try another 'client-approach', using one of these Leaflet plugins: https://github.com/IHCantabria/Leaflet.CanvasLayer.Field or https://github.com/stuartmatthews/leaflet-geotiff

    (disclaimer: I'm the author of the first one)

     – Víctor Velarde Aug 08 '17 at 12:28

2 Answers2

3

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.

IvanSanchez
  • 10,206
  • 2
  • 19
  • 35
1

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

tinyclay
  • 11
  • 1
  • 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. – Kadir Şahbaz Jan 07 '23 at 13:48