Problem importing GeoTIFF in Angular 11

[undefinedSolutions]

Hello, unfortunately I currently have a problem importing GeoTIFF in Angular 11.

When I install GeoTIFF via npm. npm install geotiff

app.component.ts:

import GeoTIFF from 'geotiff';
...
export class AppComponent {

  ngOnInit(){

    (async function() {
      const tiff = await GeoTIFF.fromUrl("http://localhost:4200/assets/out.tif");
      console.log("Number of images (pyramids):", await tiff.getImageCount());
    })()
    ...
  }
}

I then received the following error messages:

Error: ./node_modules/geotiff/src/source.js
Module not found: Error: Can't resolve 'fs' in '/home/undefined/code/WebGIS/angular-ol-cog/node_modules/geotiff/src'

Error: ./node_modules/geotiff/src/source.js
Module not found: Error: Can't resolve 'http' in '/home/undefined/code/WebGIS/angular-ol-cog/node_modules/geotiff/src'

Error: ./node_modules/geotiff/src/source.js
Module not found: Error: Can't resolve 'https' in '/home/undefined/code/WebGIS/angular-ol-cog/node_modules/geotiff/src'

I was able to fix this with adjustments in the package.json.

...
  "browser": {
    "fs": false,
    "http": false,
    "https": false
  }
...

But then I get the following error message in the browser:

ERROR Error: Uncaught (in promise): TypeError: geotiff__WEBPACK_IMPORTED_MODULE_7__.default.fromUrl is not a function
TypeError: geotiff__WEBPACK_IMPORTED_MODULE_7__.default.fromUrl is not a function

A workaround is to load the javascript file into angular.json. However, I would like to avoid this and implement a clean impementation. angular.json:

...
"scripts": [
  "src/js/geotiff.js"
]
...

app.component.ts:

declare var GeoTIFF: any;
...
export class AppComponent {

  ngOnInit(){

    (async function() {
      const tiff = await GeoTIFF.fromUrl("http://localhost:4200/assets/out.tif");
      console.log("Number of images (pyramids):", await tiff.getImageCount());
    })()
    ...
  }
}

I hope you can help me.

[constantinius]

I think this is an issue in the documentation. Please try the import like this:

import GeoTIFF, { fromUrl } from 'geotiff';
// ...

[undefinedSolutions]

Thanks a lot! It works...

[constantinius]

I will update the docs accordingly. Thanks for reporting this

[Anubhavx17]

how did you display the tiff file? could you share ur entire code for displaying tiff file in angular, thanks!

[undefinedSolutions]

I was using AG 13.1.2 for my master-thesis, here is a example for an RGBA-COG: https://github.com/undefinedSolutions/masterarbeit-cog-openlayers/blob/master/src/app/cog/cog-ortho-lindenrain/cog-ortho-lindenrain.component.ts

[Anubhavx17]

Hi there thanks a lot for replying, The snippet you sent is actually using different libraries and I would have to change the entire code. I have used leaflet to display the base map, and I am using the geotiff library to read the TIFF file as shown in https://geotiffjs.github.io/geotiff.js/

import GeoTIFF, { fromUrl, fromUrls, fromArrayBuffer, fromBlob } from 'geotiff';

//.. const response = await fetch("assets/NDVI_Nov.tiff"); const arrayBuffer = await response.arrayBuffer(); const tiff = await fromArrayBuffer(arrayBuffer); const image = await tiff.getImage(); const data = await image.readRasters(); //..

Could you please let me know how do I add this Tiff image as a layer to LeafLet map so that I can display the TIFF image on my browser ?