NgxArcgis

Angular bindings for @arcgis/core.

Install

npm install ngx-arcgis @arcgis/core

Quick start

// app.config.ts
import { provideArcgis } from 'ngx-arcgis';

providers: [
  provideArcgis()
]

// or 

providers: [
  provideArcgis({
    apiKey: 'YOUR_ARCGIS_API_KEY',
    props: { zoom: 12 }
  })
]

// or 

providers: [
  provideArcgis({
    apiKey: 'YOUR_ARCGIS_API_KEY',
    maps: [
      { 
        id: 'default', 
        props: { zoom: 12 } 
      }, 
      { 
        id: 'secondary', 
        props: { zoom: 8, center: [-118.2437, 34.0522] }
      }
    ]
  })
]

// app.component.ts
import { NgxArcgisMapComponent } from 'ngx-arcgis';

@Component({
  imports: [NgxArcgisMapComponent],
  template: `<ngx-arcgis-map />`
})
export class AppComponent {}

That's it — <ngx-arcgis-map /> renders the map registered under MAP_ID ('default' unless you change it), you need a parent that has height and width to show up.

Reading the map

import { injectMapRef } from 'ngx-arcgis';

private map = injectMapRef();
mapView = this.map.mapView; // MapView instance

Multiple maps

Declare them all in provideArcgis, then reach the extra ones from a nested component that provides its own MAP_ID:

provideArcgis({
  apiKey: 'YOUR_ARCGIS_API_KEY',
  maps: [
    { id: 'default', props: { zoom: 12 } },
    { id: 'secondary', props: { zoom: 8, center: [-118.2437, 34.0522] } }
  ]
})

import { MAP_ID, NgxArcgisMapComponent, injectMapRef } from 'ngx-arcgis';

@Component({
  imports: [NgxArcgisMapComponent],
  providers: [{ provide: MAP_ID, useValue: 'secondary' }],
  template: `<ngx-arcgis-map style="display: block; height: 400px;"></ngx-arcgis-map>`
})
export class SecondaryMapComponent {
  private map = injectMapRef();
  mapView = this.map.mapView; // the 'secondary' MapView
}

Everything inside SecondaryMapComponent — the <ngx-arcgis-map>, injectMapRef() — resolves 'secondary'. Everywhere else keeps resolving 'default'.

API

| | | | --- | --- | | provideArcgis({ apiKey?, props? }) | Register a single map (id 'default'). | | provideArcgis({ apiKey?, maps: [...] }) | Register several maps, each with its own id. | | <ngx-arcgis-map> | Renders the map for the current MAP_ID. | | injectMapRef() | Returns { id, mapView } for the current MAP_ID. Call from an injection context. | | MAP_ID | Injection token. Override it in a nested provider to target a different map. | | ArcgisStore | Advanced: getMapView(id), isMapReady(id), createMap({ id, props }), mapReady signal. |