I am currently creating a web app for visualizing disaster impact via satellite imagery. I have satellite images (.tif) which I need to overlay over OpenStreetMap. Since .tif file is very large, I used magic slicer to break down image into multiple tiles and used leaflet-deepzoom for loading the tileLayer.

Following is the code for loading OSM layer:

var map = L.map( 'map', {
        center: [28.3949, 84.1240],
        minZoom: 2,
        zoom: 4

 L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: ['a','b','c']
    }).addTo( map );

This works fine for loading OSM but I need to overlay my satellite image as next tileLayer:

        width: 12800, 
        height: 5376,

This loads both layers but in a disoriented way. I need to correctly position the satellite image layer. Is there any possible way to provide geocoordinate bounds (topLeft latlng and bottomRight latlng) of this tiles/harvey_impact_files/ image so that this image loads exactly over OSM layer??

  • is your tiff georeferenced? – Ian Turton Jul 4 '19 at 11:14
  • @IanTurton Yes, it is. Is there any way to pass those georeferences here? – A n i s Jul 4 '19 at 11:21
  • 1
    The approach would be to use github.com/stuartmatthews/leaflet-geotiff (or the like, see leafletjs.com/plugins.html ) instead of deepzoom. deepzoom is meant for photographs and will destroy your georeferencing. – IvanSanchez Jul 4 '19 at 11:44
  • @IvanSanchez - can you make that into an answer – Ian Turton Jul 4 '19 at 12:30
  • Thanks for help @IvanSanchez. I used gdal2tiles-leaflet for generating raster image tiles and used leaflet-geotiff plugin. Problem seems to be fixed. You can make it to answer and I'll accept the solution!! – A n i s Jul 4 '19 at 12:56

The main issue I see is that you're using L.TileLayer.DeepZoom from https://github.com/alfarisi/leaflet-deepzoom . Approaches like L.TileLayer.DeepZoom and every other plugin listed in the "Non-map base layers" section of the Leaflet plugins list are, well, not meant to be used with maps.

In other words: L.TileLayer.DeepZoom, L.TileLayer.Zoomify and L.TileLayer.Gigapan (as well as the MagickSlicer image tiler you used) are meant for big photographs (or medical data, or microscope images). By using them, you are losing the spatial information contained in your GeoTIFF files.

You should use an approach that takes into account the spatial information from your GeoTIFFs. There are several such approaches, such as using gdal2tiles to slice the image, loading a non-sliced cloud-optimized GeoTIFF directly into Leaflet via leaflet-georaster, or others.

| improve this answer | |
  • Is there any plugin to use sliced tiles for geoTiff image overlay over OSM? leaflet-geotiff and leaflet-georaster tend to use direct image link which might not be efficient in some cases where satellite image are high res. – A n i s Jul 4 '19 at 17:25
  • If the images are properly sliced (that means "reproject them into EPSG:3857 first"), then no plugin is needed. Also, do not fear cloud-optimized geotiffs. – IvanSanchez Jul 5 '19 at 7:19

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.