Get mapView in another Angular Component

matteorizzi — Fri, 19 Nov 2021 18:23:02 GMT

Hello! Let me explain better my issue:
- I created (in a typical way) a map View in the angular "component One":

export class MapComponent implements OnInit, OnDestroy { view: any; @ViewChild('esriMap', { static: true }) private mapViewEl!: ElementRef; initializeMap(): Promise<any> { const container = this.mapViewEl.nativeElement; esriConfig.portalUrl = "...."; const webmap = new WebMap({ portalItem: { id: '...', }, }); const layer = new FeatureLayer({ // URL to the service URL: "..." }); webmap.add(layer) const view = new MapView({ container, map: webmap, zoom: 3, constraints: { minZoom: 3 } }); this.view = view; return this.view.when(); }

Then I need to use the "goTo" method in another angular component, let's call it "component Two".
How can I access the view defined in the component One from the component Two? Is it possible?

Thank you so much

Re: Get mapView in another Angular Component

ReneRubalcava — Fri, 19 Nov 2021 19:09:30 GMT

You can move all the JSAPI logic into an injectable service and use that service in components you want to be able to access it.

import { Injectable } from '@angular/core'; import WebMap from '@arcgis/core/WebMap'; import MapView from '@arcgis/core/views/MapView'; import Bookmarks from '@arcgis/core/widgets/Bookmarks'; import Expand from '@arcgis/core/widgets/Expand'; @Injectable({ providedIn: 'root' }) export class MapService { public view: MapView | null = null; constructor() {} async createMap(container: HTMLDivElement) { const webmap = new WebMap({ portalItem: { id: 'aa1d3f80270146208328cf66d022e09c' } }); const view = new MapView({ container, map: webmap }); 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(); } }

topic Re: Get mapView in another Angular Component in ArcGIS JavaScript Maps SDK Questions

Get mapView in another Angular Component

Re: Get mapView in another Angular Component