2

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

5
  • is your tiff georeferenced?
    – Ian Turton
    Jul 4, 2019 at 11:14
  • @IanTurton Yes, it is. Is there any way to pass those georeferences here?
    – A n i s
    Jul 4, 2019 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. Jul 4, 2019 at 11:44
  • @IvanSanchez - can you make that into an answer
    – Ian Turton
    Jul 4, 2019 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, 2019 at 12:56

1 Answer 1

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.

2
  • 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, 2019 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. Jul 5, 2019 at 7:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.