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??
gdal2tiles-leaflet
for generating raster image tiles and usedleaflet-geotiff
plugin. Problem seems to be fixed. You can make it to answer and I'll accept the solution!!