angular-esri-loader

angular-esri-loader

An Angular library to help you load ArcGIS API for JavaScript modules.

Exposes a service that wraps the functions from the esri-loader library in new functions that return promises.

To understand why this is needed, and the benefits of using esri-loader over other techniques, see the esri-loader README.

Install

For Angular 4 and above:

npm install angular-esri-loader

For Angular 2:

npm install angular2-esri-loader esri-loader

NOTE: for AngularJS use angular-esri-map.

Usage

Below is an example of using the loader service in a component to lazy load the ArcGIS API and create a map.

First you need to import the EsriLoaderModule into your application:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EsriLoaderModule } from 'angular-esri-loader';

import { AppComponent } from './app.component';
import { EsriMapComponent } from './esri-map.component';

@NgModule({
  declarations: [
    AppComponent,
    EsriMapComponent
  ],
  imports: [
    BrowserModule,
    EsriLoaderModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then you can use the EsriLoaderService in a component to load a map:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { EsriLoaderService } from 'angular-esri-loader';

@Component({
  selector: 'app-esri-map',
  templateUrl: './esri-map.component.html',
  styleUrls: ['./esri-map.component.css']
})
export class EsriMapComponent implements OnInit {
  @ViewChild('map') mapEl: ElementRef;
  
  map: any;

  constructor(private esriLoader: EsriLoaderService) { }

  ngOnInit() {
    // only load the ArcGIS API for JavaScript when this component is loaded
    return this.esriLoader.load({
      // use a specific version of the API instead of the latest
      url: '//js.arcgis.com/3.18/'
    }).then(() => {
      // load the map class needed to create a new map
      this.esriLoader.loadModules(['esri/map']).then(([Map]) => {
        // create the map at the DOM element in this component
        this.map = new Map(this.mapEl.nativeElement, {
          center: [-118, 34.5],
          zoom: 8,
          basemap: 'dark-gray'
        });
      });
    });
  }
}

In an Angular CLI Application

To use this library in an Angular CLI application, the best place to start is to follow the instructions in this gist.

For an example of how to use this service to lazy load the ArcGIS API and resolve modules in a route, see esri-angular-cli-example's esri-map-resolve.service.ts.

In an angular2-webpack-starter Application

See this gist for instructions on how to use this library in an AngularClass/angular2-webpack-starter application.

In an Angular 2 Application

Example of using the loader service in a component to lazy load the ArcGIS API and create a map

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

import { EsriLoaderService } from 'angular-esri-loader';

@Component({
  selector: 'app-esri-map',
  templateUrl: './esri-map.component.html',
  styleUrls: ['./esri-map.component.css']
})
export class EsriMapComponent implements OnInit {
  @ViewChild('map') mapEl: ElementRef;
  
  map: any;

  constructor(private esriLoader: EsriLoaderService) { }

  ngOnInit() {
    // only load the ArcGIS API for JavaScript when this component is loaded
    return this.esriLoader.load({
      // use a specific version of the API instead of the latest
      url: '//js.arcgis.com/3.18/'
    }).then(() => {
      // load the map class needed to create a new map
      this.esriLoader.loadModules(['esri/map']).then(([Map]) => {
        // create the map at the DOM element in this component
        this.map = new Map(this.mapEl.nativeElement, {
          center: [-118, 34.5],
          zoom: 8,
          basemap: 'dark-gray'
        });
      });
    });
  }
}

ArcGIS Types

This service doesn't make any assumptions about which version of the ArcGIS API you are using, so you will have to manually install the appropriate types.

4.x Types

Follow these instructions to install the 4.x types.

For Angular CLI applications, you will also need to add "arcgis-js-api" to compilerOptions.types in src/tsconfig.app.json and src/tsconfig.spec.json as shown here.

Then you can use the __esri namespace for the types as seen in this example.

3.x Types

Unfortunately the __esri namespace is not defined for 3.x types. You can use these instructions to install the 3.x types, but then you will still need to use import statements to get the types. This may cause build errors that may or may not result in actual runtime errors depending on your environment.

Examples

This service is in use in these applications:

• esri-angular-cli-example

Resources

• Using the ArcGIS API for JavaScript in Applications built with webpack
• esri-loader

Credit

Thanks to @kgs916 for helping me figure out how to publish a TypeScript library for Angular 2. I'll never do that again.

Changelog

1.1.0

Changed

• renamed to angular-esri-loader