Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
angular2-esri-loader instructions
  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
  1. Add the following import statements to the bottom of your application's module:
import { EsriLoaderService } from 'angular2-esri-loader';
import { EsriMapComponent } from './esri';
  1. Add the following to your application's declarations (you'll make a new mapping component soon):
  1. Add the following to your application's providers to register angular2-esri-loader's EsriLoaderService:
  1. Create a new component that uses the EsriLoaderService to show a map
  1. Optional: Create a new route in your application if needed
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 },
/* import the required JSAPI css */
@import '';
.esri-view {
height: 500px;
import {
} 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';
selector: 'esri',
template: `
Esri JSAPI with
<a href="" target="_blank">
<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;
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: ''
}).then(() => {
// load the needed Map and MapView modules from the JSAPI
]) => {
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment