Skip to content

Instantly share code, notes, and snippets.

@jwasilgeo
Last active November 2, 2017 15:46
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jwasilgeo/00855ee002aca822e33abd8a7a031f56 to your computer and use it in GitHub Desktop.
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):
EsriMapComponent
  1. Add the following to your application's providers to register angular2-esri-loader's EsriLoaderService:
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 'https://js.arcgis.com/4.3/esri/css/main.css';
.esri-view {
height: 500px;
}
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);
});
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment