-
Notifications
You must be signed in to change notification settings - Fork 0
/
esri-map.component.ts
57 lines (47 loc) · 1.72 KB
/
esri-map.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
// also import the "angular2-esri-loader" to be able to load JSAPI modules
import { EsriLoaderService } from './../esri-loader.service';
@Component({
selector: 'app-esri-map',
templateUrl: './esri-map.component.html',
styleUrls: ['./esri-map.component.css']
})
export class EsriMapComponent implements OnInit {
// for JSAPI 4.x you can use the "any 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(
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
]: [ __esri.MapConstructor, __esri.MapViewConstructor]) => {
const mapProperties: __esri.MapProperties = {
basemap: 'hybrid'
};
const 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);
});
});
}
}