Add map component

package.json

@@ -27,31 +27,30 @@
     "@angular/platform-browser": "~4.0.0",
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
-
     "angular-in-memory-web-api": "~0.3.0",
-    "systemjs": "0.19.40",
     "core-js": "^2.4.1",
+    "esri-system-js": "^1.0.0-beta.0",
     "rxjs": "5.0.1",
+    "systemjs": "0.19.40",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "concurrently": "^3.2.0",
-    "lite-server": "^2.2.2",
-    "typescript": "~2.1.0",
-
+    "@types/arcgis-js-api": "^4.3.0",
+    "@types/jasmine": "2.5.36",
+    "@types/node": "^6.0.46",
     "canonical-path": "0.0.2",
-    "tslint": "^3.15.1",
-    "lodash": "^4.16.4",
+    "concurrently": "^3.2.0",
     "jasmine-core": "~2.4.1",
     "karma": "^1.3.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-cli": "^1.0.1",
     "karma-jasmine": "^1.0.2",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "lite-server": "^2.2.2",
+    "lodash": "^4.16.4",
     "rimraf": "^2.5.4",
-
-    "@types/node": "^6.0.46",
-    "@types/jasmine": "2.5.36"
+    "tslint": "^3.15.1",
+    "typescript": "~2.1.0"
   },
   "repository": {}
 }

src/app/app.component.html

@@ -0,0 +1,3 @@
+<map #map zoom="2" longitude="-19.71" latitude="32.63">
+
+</map>

src/app/app.component.ts

@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
 
+declare const __moduleName: string;
+
 @Component({
-  moduleId: module.id,
+  moduleId: __moduleName,
   selector: 'root-app',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css']

src/app/app.module.ts

@@ -2,10 +2,14 @@ import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent }  from './app.component';
+import { MapComponent }  from './map/map.component';
+
+import { MapService }    from './map/map.service';
 
 @NgModule({
   imports:      [ BrowserModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
+  declarations: [ AppComponent, MapComponent ],
+  bootstrap:    [ AppComponent ],
+  providers:    [ MapService ]
 })
 export class AppModule { }

src/app/map/map.component.css

@@ -0,0 +1,5 @@
+div {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}

src/app/map/map.component.html

@@ -0,0 +1,3 @@
+<div>
+  <ng-content></ng-content>
+</div>

src/app/map/map.component.ts

@@ -0,0 +1,37 @@
+import { Component, ElementRef, Input } from '@angular/core';
+import { MapService } from './map.service';
+import Map from 'esri/Map';
+import MapView from 'esri/views/MapView';
+
+declare const __moduleName: string;
+
+@Component ({
+  moduleId: __moduleName,
+  selector: 'map',
+  templateUrl: 'map.component.html',
+  styleUrls: ['map.component.css']
+})
+
+export class MapComponent {
+  @Input() zoom: number;
+  @Input() longitude: number;
+  @Input() latitude: number;
+
+  view: any = null;
+
+  constructor(
+    private _mapService: MapService,
+    private elRef: ElementRef
+  ) {}
+
+  ngOnInit() {
+    this.view = new MapView({
+      container: this.elRef.nativeElement.firstChild,
+      map: this._mapService.map,
+      zoom: this.zoom,
+      center: [this.longitude, this.latitude],
+    });
+
+    this.view.ui.move('zoom', 'bottom-right');
+  }
+}

src/app/map/map.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import Map from 'esri/Map';
+
+@Injectable()
+
+export class MapService {
+
+    map: any = null;
+
+    constructor() {
+        this.map = new Map({
+            basemap: 'dark-gray-vector',
+        });
+    }
+}

src/index.html

@@ -5,6 +5,7 @@
     <base href="/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="//js.arcgis.com/4.3/esri/css/main.css">
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
@@ -13,13 +14,18 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
+    <script src="//js.arcgis.com/4.3/"></script>
+    <script src="node_modules/esri-system-js/dist/esriSystem.js"></script>
+
     <script src="systemjs.config.js"></script>
+
     <script>
       System.import('main.js').catch(function(err){ console.error(err); });
     </script>
   </head>
 
   <body>
     <root-app>Loading...</root-app>
+    <script src="load.js"></script>
   </body>
 </html>

src/load.ts

@@ -0,0 +1,12 @@
+declare const System: any;
+declare const esriSystem: any;
+
+// load Esri modules with the help of esri-system-js library
+esriSystem.register([
+    'esri/Map',
+    'esri/views/MapView',
+], function() {
+    // bootstrap the app
+    System.import('main.js')
+        .then(null, console.error.bind(console));
+});

src/styles.css

@@ -5,3 +5,8 @@ html, body {
   padding: 0;
   overflow: hidden;
 }
+
+.esri-view {
+  height: 100%;
+  width: 100%;
+}

src/systemjs.config.js

@@ -25,7 +25,9 @@
 
       // other libraries
       'rxjs':                      'npm:rxjs',
-      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
+
+      'esri': 'http://js.arcgis.com/4.3/esri'
     },
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {

src/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "commonjs",
+    "module": "system",
     "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,