developmentseed / developmentseed/deck.gl-raster

Struggling with Angular implementation

Open
#623 17 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
228
Forks
29
Avg merge
12h 27m
Merged PRs (30d)
4

Description

Hi there, is there an Angular COG layer example or repo we can use as a guide please?

We have tried numerous approaches to implement @developmentseed/deck.gl-geotiff but keep encountering certain errors.

Code sample used:

```
import {
Component,
AfterViewInit,
ElementRef,
ViewChild,
Inject,
PLATFORM_ID,
} from '@angular/core';
import maplibregl from 'maplibre-gl';
import { isPlatformBrowser } from '@angular/common';

@Component({
selector: 'app-map',
imports: [],
templateUrl: './map.component.html',
standalone: true
})
export class MapComponent implements AfterViewInit {
constructor(@Inject(PLATFORM_ID) private readonly platformId: Object) {}
@ViewChild('map')
mapElement!: ElementRef;

ngAfterViewInit() {
if (isPlatformBrowser(this.platformId)) {

const map = new maplibregl.Map({
container: this.mapElement.nativeElement,
style: 'https://tiles.openfreemap.org/styles/liberty',
center: [-56.40, -33.75],
zoom: 10,
});

map.on('load', async () => {
const [{ MapboxOverlay }, { COGLayer }] = await Promise.all([
import('@deck.gl/mapbox'),
import('@developmentseed/deck.gl-geotiff'),
]);
const overlay = new MapboxOverlay({
interleaved: false,
layers: [
new COGLayer({
id: 'cog-layer',
geotiff:
'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/TCI.tif',
opacity: 1,
}),
],
});

map.addControl(overlay);
});
}
}
}
```
The only thing close to an example was on this issue, but I'm not sure what the entire implementation was. https://github.com/developmentseed/deck.gl-raster/issues/326

On Angular 16 and lower, we get:
Angular 16 fails because the package requires top-level await, which Angular 16's Webpack configuration doesn't enable.
```
./node_modules/@developmentseed/lzw-tiff-decoder/index.mjs - Warning: The generated code contains 'async/await' because this module is using "topLevelAwait".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.
```
And above:
Angular 22 fails because of worker loading and dependency bundling (lerc) under the current application builder.

We got to the point where Map Libre loads the map at the correct coords, but the COG does not show. We have tried excluding bundles and numerous other suggestions, but nothing seems to do the trick.

I've tried a clean React project, which works perfectly.

Kind regards =-)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the MapComponent implementation and the Angular 16 and Angular 22 build errors described here, then compare them with the partial example in issue #326 and the working React project. Done means providing a complete Angular COG layer example or repository that loads the MapLibre map and displays the referenced COG without the reported bundling or worker errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
documentation, frontend
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.