Overlaying satellite image tileLayer over OpenStreetMap in LeafletJS?

Question

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:

L.tileLayer.deepzoom('tiles/harvey_impact_files/',{ 
        width: 12800, 
        height: 5376,
    }).addTo(map).setOpacity(0.5);

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??

Answer 1

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.