I am attempting to use the ArcGIS Javascript SDK. I am following the documentation outlined here: https://developers.arcgis.com/javascript/latest/get-started-angular/
In doing so, I keep getting the following error(s):
[esri.views.webgl.FramebufferObject] Resizing FBO attachment size 2368x16476 to device limit 16384
The system seems to loop continually with this error until it finally fails with this error:
ERROR TypeError: Cannot destructure property 'spans' of 'g' as it is null. at m2._renderBackgroundLayers (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:5146) at m2._doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:2957) at m2.renderChildren (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:2374) at m2.doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/Container.js:5:1898) at m2.doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/vectorTiles/VectorTileContainer.js:5:2055) at m2.processRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/DisplayObject.js:5:2380) at h4.renderChildren (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/Container.js:5:3507) at h4.doRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/Container.js:5:1898) at h4.processRender (/Users/mrivera/Projects/mapping-test-2/node_modules/@arcgis/core/views/2d/engine/DisplayObject.js:5:2380) at q2._renderChildren (http://localhost:4200/@fs/Users/mrivera/Projects/mapping-test-2/.angular/cache/17.3.8/vite/deps/mapViewDeps-6CCLAVOG.js?v=44a6020f:2830:11) {stack: "TypeError: Cannot destructure property 'spans…s/mapViewDeps-6CCLAVOG.js?v=44a6020f:2830:11)", message: "Cannot destructure property 'spans' of 'g' as it is null."}
On the UI, the map appears to render initially but then scrolls in till the map finally disappears.
The application setup is pretty basic, since I am just trying to get the map to show on the screen. I am pretty new in using ArcGiS so any assistance would be appreciated.
app.component.ts -
import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { MappingModule } from './mapping/mapping.module'; @Component({ selector: 'aig-root', standalone: true, imports: [RouterOutlet, MappingModule], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) export class AppComponent { title = 'mapping-test-2'; }
app.component.html -
<div>
<aig-mapping></aig-mapping>
</div>
mapping.module.ts -
import { NgModule } from '@angular/core'; import { ComponentLibraryModule } from '@arcgis/map-components-angular'; import { MappingComponent } from './mapping.component'; @NgModule({ declarations: [MappingComponent], imports: [ComponentLibraryModule], exports:[MappingComponent] }) export class MappingModule {}
mapping.component.ts -
import { Component, OnInit } from "@angular/core"; import { defineCustomElements } from "@arcgis/map-components/dist/loader"; @Component({ selector: "aig-mapping", templateUrl: "./mapping.component.html", styleUrls: ["./mapping.component.scss"] }) export class MappingComponent implements OnInit { title = "map-components-angular-template"; arcgisViewReadyChange(event: any) { console.log("MapView ready", event); } ngOnInit(): void { defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" }); } }
mapping.component.html
<arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9" (arcgisViewReadyChange)="arcgisViewReadyChange($event)"> <arcgis-expand> <arcgis-search position="top-right"></arcgis-search> </arcgis-expand> <arcgis-legend position="bottom-left"></arcgis-legend> </arcgis-map>
package.json -
{ "name": "mapping-test-2", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^17.3.0", "@angular/common": "^17.3.0", "@angular/compiler": "^17.3.0", "@angular/core": "^17.3.0", "@angular/forms": "^17.3.0", "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", "@arcgis/map-components-angular": "^4.30.7", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" }, "devDependencies": { "@angular-devkit/build-angular": "^17.3.8", "@angular/cli": "^17.3.8", "@angular/compiler-cli": "^17.3.0", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.4.2" } }
Any assistance would be appreciated
Make sure you add the appropriate CSS.
In app.component.css:
@import url('https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css');
And in styles.css:
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}