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

• Import NgEsriMapModule inside your Application
• Insert map component into template like this:

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

• 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