Search code examples
angulartypescriptleafletgeotiff

Leaflet-geotiff usage in Angular 6 application

I faced with problem that I can't to display any .tif image on my map. I'm using leaflet-geotiff plugin for my map. I downloaded the file (for example from gis-lab.info, here is link to download) and tried to paste and display on my map. But I always get Custom Mask is off screen.

Here is a sample how I use it:

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);
        });
    }
}

And also here what I have in browser console (I added some console.log in leaflet-geotiff lib to be sure that tif file parsed there):

enter image description here

Seems in code in leaflet-geotiff it happens when plotHeight and plotWidth has negative values. And my layer still not showing on map. What am I doing wrong? And how can I display custom tif file correctly?

Solution

  • Apparently the error Custom Mask is off screen. occurs since the provided file is represented in WGS 84 / UTM zone 39N projection

    enter image description here

    while only EPSG:4326 files are supported by geotiff.js library (dependency for leaflet-geotiff).

    From leaflet-geotiff readme file:

    url - GeoTIFF file URL. Currently only EPSG:4326 files are supported.

    Once reprojected to (e.g. using this tool) to EPSG:4326, it could be displayed via leaflet-geotiff like this

    enter image description here