developmentseed / developmentseed/deck.gl-raster
Struggling with Angular implementation
- 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