Leaflet-geotiff usage in Angular 6 application

Question

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):

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?

Vadim Gremyachev · Accepted Answer · 2019-04-14 14:09:29Z

1

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

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

edited Apr 14, 2019 at 14:09

answered Apr 14, 2019 at 13:09

Vadim Gremyachev

59.6k21 gold badges139 silver badges205 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Leaflet-geotiff usage in Angular 6 application

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related