Cannot read property 'nativeElement' of undefined

I am using ArcGIS Map using angular and am getting error to render my HTML Div tag and error is “Cannot read property ‘nativeElement’ of undefined”

component.html page : <div  #mapviewnode></div>

component.ts page : below

 @ViewChild('mapViewNode') public mapViewEl: ElementRef;
    //@ViewChild("mapViewNode") public searchElement: ElementRef;

    initializeMap(): Promise<any> {
        debugger
        const container = this.mapViewEl.nativeElement;
        const layer = new FeatureLayer({
            url: "https://services6.arcgis.com/KA88lzxweZ86kjDY/arcgis/rest/services/OHaresMap_WFL1/FeatureServer",
            outFields: ["*"]
        });
        const webmap = new WebMap({
            portalItem: {
                id: '6376d7dafbf04761bd460c44dc2d2494',
            },
        });
        const view = new MapView({
            container,
            map: webmap,

        });
        view.when(function () {
            var layerList = new LayerList({
                view: view
            });
            view.ui.add(layerList, "top-right");
        });
        // const bookmarks = new Bookmarks({
        //   view,
        //   // allows bookmarks to be added, edited, or deleted
        //   editingEnabled: true,
        // });

        // const bkExpand = new Expand({
        //   view,
        //   content: bookmarks,
        //   expanded: true,
        // });

        // Add the widget to the top-right corner of the view
        //view.ui.add(bkExpand, 'top-right');

        // bonus - how many bookmarks in the webmap?
        webmap.when(() => {
            if (webmap.bookmarks && webmap.bookmarks.length) {
                console.log('Bookmarks: ', webmap.bookmarks.length);
            } else {
                console.log('No bookmarks in this webmap.');
            }
        });

        this.view = view;
        return this.view.when();
    }

2 posts - 2 participants

Read full topic