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.
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.
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'
});
});
});
}
}
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.
See this gist for instructions on how to use this library in an AngularClass/angular2-webpack-starter 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'
});
});
});
}
}
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.
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.
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.
This service is in use in these applications:
Thanks to @kgs916 for helping me figure out how to publish a TypeScript library for Angular 2. I'll never do that again.