angular2-esri-loader instructions

angular2-esri-loader instructions.md

1. Clone the starter repo AngularClass/angular2-webpack-starter and then cd into your local directory.

2. Install angular2-esri-loader

npm install angular2-esri-loader --save

# optional, if you want type support in your IDE for JSAPI 4.x
npm install @types/arcgis-js-api --save-dev

3. Add the following import statements to the bottom of your application's module:

import { EsriLoaderService } from 'angular2-esri-loader';
import { EsriMapComponent } from './esri';

4. Add the following to your application's declarations (you'll make a new mapping component soon):

EsriMapComponent

5. Add the following to your application's providers to register angular2-esri-loader's EsriLoaderService:

EsriLoaderService

6. Create a new component that uses the EsriLoaderService to show a map

• see esri.component.ts and esri.component.css below

7. Optional: Create a new route in your application if needed

• see example app.routes.ts below

app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home';
import { AboutComponent } from './about';
import { EsriMapComponent } from './esri';
import { NoContentComponent } from './no-content';

import { DataResolver } from './app.resolver';

export const ROUTES: Routes = [
  { path: '',      component: HomeComponent },
  { path: 'home',  component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'esri',  component: EsriMapComponent },
  { path: 'detail', loadChildren: './+detail#DetailModule'},
  { path: 'barrel', loadChildren: './+barrel#BarrelModule'},
  { path: '**',    component: NoContentComponent },
];

esri.component.css

/* import the required JSAPI css */
@import 'https://js.arcgis.com/4.3/esri/css/main.css';

.esri-view {
    height: 500px;
}

esri.component.ts

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

// also import the "angular2-esri-loader" to be able to load JSAPI modules
import { EsriLoaderService } from 'angular2-esri-loader';

@Component({
  selector: 'esri',
  template: `
    <h1>
      Esri JSAPI with
      <a href="https://github.com/tomwayson/angular2-esri-loader" target="_blank">
        <code>angular2-esri-loader</code>
      </a>
    </h1>
    <div #mapViewNode></div>
  `,
  styleUrls: ['./esri.component.css']
})
export class EsriMapComponent implements OnInit {
  // for JSAPI 4.x you can use the "__esri" namespace for TS types
  public mapView: __esri.MapView;

  // this is needed to be able to create the MapView at the DOM element in this component
  @ViewChild('mapViewNode') private mapViewEl: ElementRef;

  constructor(
    public route: ActivatedRoute,
    private esriLoader: EsriLoaderService
  ) { }

  public ngOnInit() {
    // only load the ArcGIS API for JavaScript when this component is loaded
    return this.esriLoader.load({
      // use a specific version of the JSAPI
      url: 'https://js.arcgis.com/4.3/'
    }).then(() => {
      // load the needed Map and MapView modules from the JSAPI
      this.esriLoader.loadModules([
        'esri/Map',
        'esri/views/MapView'
      ]).then(([
        Map,
        MapView
      ]) => {
        const mapProperties: __esri.MapProperties = {
          basemap: 'hybrid'
        };

        const map: __esri.Map = new Map(mapProperties);

        const mapViewProperties: __esri.MapViewProperties = {
          // create the map view at the DOM element in this component
          container: this.mapViewEl.nativeElement,
          // supply additional options
          center: [-12.287, -37.114],
          zoom: 12,
          map // property shorthand for object literal
        };

        this.mapView = new MapView(mapViewProperties);
      });
    });
  }
}