I'm currently facing an issue where I am unable to display any .tif image on my map using the leaflet-geotiff plugin. I downloaded a file from gis-lab.info (you can download it from this link) and attempted to add it to my map, but I keep encountering the error message: Custom Mask is off screen.
Let me show you how I used the plugin:
import * as geotiff from 'leaflet-geotiff/leaflet-geotiff';
import * as plotty from 'leaflet-geotiff/leaflet-geotiff-plotty';
export class MapComponent {
ngOnInit() {
this.map.on('load', () => {
const options = {
band: 0,
name: 'Custom Mask',
opacity: 1,
renderer: new plotty.Plotty({
colorScale: 'greys'
})
};
new geotiff.LeafletGeotiff('assets/uploads/clearcuts_174016_20101018_clip.tif', options).addTo(this.leafletMap);
});
}
}
In addition, here is what I found in the browser console (I added some console.log statements in the leaflet-geotiff library to verify that the tif file was being parsed there):
https://i.sstatic.net/6npNA.png
It seems like in the code within the leaflet-geotiff library, the issue arises when plotHeight and plotWidth have negative values. Despite my attempts, the layer still does not appear on the map. Can someone help pinpoint what I might be doing wrong? How can I successfully render a custom tif file on the map?