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: '© <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??
Best Answer
The main issue I see is that you're using
L.TileLayer.DeepZoom
from https://github.com/alfarisi/leaflet-deepzoom . Approaches likeL.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
andL.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.