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.
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.
Here you have a working example I just made for the elevation of the municipality of Lisbon.
It uses the the module georaster-layer-for-leaflet.
I just found the plugin georaster-layer-for-leaflet, it's so amazing. https://github.com/GeoTIFF/georaster-layer-for-leaflet
