ng-esri-map

NgEsriMap component

Easy to use component which helps to integrate and control ESRI map inside your Angular application

Life example

You can find here

Basic usage

1. Import NgEsriMapModule inside your Application
2. Insert map component into template like this:

   <div #myMap="ngEsriMap"
        ngEsriMap
        [ngEsriMapImageLayers]="layers"
   ></div>
   

3. Control map inside your component:

   import { Component, ViewChild } from '@angular/core';
   import { EsriMapDirective, Layer } from 'ng-esri-map';
   
   @Component({
     selector: 'my-map',
     templateUrl: './my-map.component.html',
     styleUrls: ['./my-map.component.css']
   })
   export class MyMapComponent {
     public layers: Layer[] = [
       {
         url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer'
       }
     ];
     @ViewChild('myMap') private myMap: EsriMapDirective;
   
     public ngOnInit() {
       this.myMap.initMap({latitude: 1, longitude: 2});
     }
   }
   

Advanced usage

You can find an example

Changelog

[5.0.0]

Added

• Option to specify ArcGIS JS API version.

Changed

• Update default JS API version to 4.15 (was 4.11)
• Update to Angular 10