topic Re: Add feature layer to map component using angular in ArcGIS JavaScript Maps SDK Questions

Add feature layer to map component using angular

PeteVitt — Tue, 15 Apr 2025 20:33:20 GMT

Hi - I'm working with Javascript maps SDK 4.32 and am attempting to add a feature layer to a map component. I'm basing my effort on the map component angular sample on github (https://github.com/Esri/jsapi-resources/tree/main/component-samples/map-components/samples/angular) and this post about adding a feature layer to a map component (https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/map-component-api/td-p/1418711)

Below is the code I'm using. I'm getting an error 'addLayer does not exist on type element'

html:
<arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9" (arcgisViewReadyChange)="arcgisViewReadyChange($event)"></arcgis-map>

component:
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import "@arcgis/map-components/components/arcgis-map";
import FeatureLayer from '@arcgis/core/layers/FeatureLayer';

@Component({

selector: 'app-rd-map2',

imports: [],

templateUrl: './rd-map2.component.html',

styleUrl: './rd-map2.component.css',

schemas: [CUSTOM_ELEMENTS_SCHEMA]

})

export class RdMap2Component {

arcgisMap = document.querySelector("arcgis-map");

featureLayer = new FeatureLayer({

url:

"https://www.xyz/MapServer/0",

});

ngOnInit() {

var a = this;

a.arcgisMap.addEventListener("arcgisViewReadyChange", () => {

a.arcgisMap.addLayer(this.featureLayer);//==> error occurs here addLayer does not exist on type element

});

}

any ideas how to get a reference to the map component so the feature layer can be added?

Thanks

Pete

Re: Add feature layer to map component using angular

PeteVitt — Wed, 16 Apr 2025 14:28:51 GMT

I've made a little progress. I can see the arcgis-map component properties from the event.target (see attached console screen shot)

arcgisViewReadyChange(event: any) {

var map = event.target;

console.log(map);

}

Can I type my map variable to ArcgisMap from this import statement?

import { ArcgisMap } from "@arcgis/map-components/dist/components/arcgis-map";

I've been trying to do that like this:

var map:ArcgisMap = new ArcgisMap();

map = event.target;

but I'm getting a kind of ugly typescript an error: TS2304: cannot find name 'WeakRef'

Re: Add feature layer to map component using angular

ReneRubalcava — Wed, 16 Apr 2025 14:50:57 GMT

Here is a sample Angular app that adds a layer and more. You don't instantiate components, just declare them via html elements.

https://github.com/odoe/map-components-angular/blob/main/src/app/components/map/map.component.ts

Re: Add feature layer to map component using angular

PeteVitt — Wed, 16 Apr 2025 14:51:23 GMT

Got the error: TS2304: cannot find name 'WeakRef' solved by adding adding ESNext to tsconfig.json

"lib": [

"es2018",

"ESNext",

"dom"

new error is

TS2339: Property 'messages' does not exist on type 'ArcgisBasemapGallery'

Re: Add feature layer to map component using angular

PeteVitt — Wed, 16 Apr 2025 15:11:18 GMT

Thanks Rene - got the feature layer added.

Pete