angular2-esri-loader

angular2-esri-loader

An Angular 2 service 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.

Install

npm install angular2-esri-loader esri-loader

Usage

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 'angular2-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'
        });
      });
    });
  }
}

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.

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

0.1.11

Changed

• Removed index.ts as main entry point