Fix lazy load and updated README

README.md

@@ -8,6 +8,28 @@ First add this two line to your index.html:
   <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/css/atlas.min.css?api-version=1.0" type="text/css" />
   <script src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=1.0"></script>
 ````
+Or use our lazy loading
+#### Lazy loading
+```ts
+// in component constructor:
+constructor(private mapService: LoadMapService) {}
+// and use load() method for expample in ngOnInit
+
+this.mapService.load().subscribe((value) => {
+  console.log('MAP WAS LOADED')
+})
+```
+<br>
+
+This `mapService` own `isLoaded` properties so you can simple use it to know when map was loaded in temaple
+```html
+<div *ngIf="mapService.isLoaded">
+  <am-map
+    [initialConfig]="config"
+  </am-map>
+ </div>
+```
+
 To wrap this module you can add in your template:
 ```html
 <am-map

public_api.ts

@@ -2,3 +2,4 @@
 
 export * from './src/azure-map/am.module';
 export * from './src/azure-map/atlas-map/atlas-map.component';
+export * from './src/azure-map/utils/load-map.service';

src/azure-map/am.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import {ModuleWithProviders, NgModule} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AtlasMapComponent } from './atlas-map/atlas-map.component';
 import { AtlasPopupDirective } from './directives/atlas-popup.directive';
@@ -9,7 +9,6 @@ import {BrowserModule} from '@angular/platform-browser';
   imports: [
     CommonModule,
   ],
-  providers: [LoadMapService],
   declarations: [AtlasMapComponent, AtlasPopupDirective],
   exports: [
     AtlasMapComponent,
@@ -18,4 +17,13 @@ import {BrowserModule} from '@angular/platform-browser';
   bootstrap: [AtlasMapComponent]
 })
 export class AmModule {
+  public static forRoot(): ModuleWithProviders {
+
+    return {
+      ngModule: AmModule,
+      providers: [
+        LoadMapService
+      ]
+    };
+  }
 }

src/azure-map/atlas-map/atlas-map.component.ts

@@ -44,19 +44,18 @@ export class AtlasMapComponent implements OnInit, AfterContentInit {
 
   private cssArray: string[] = [];
 
-  private mapPromise: Promise<any>;
   public mapLoaded = false;
 
   constructor(private mapService: LoadMapService) {
 
   }
 
   ngOnInit(): void {
-        this.createMap()
-        this.popupAtlas = new atlas.Popup();
-        this.mapLoaded = true;
-        this.createPoints(this.features);
-        this.startMapClickListener();
+    this.createMap();
+    this.popupAtlas = new atlas.Popup();
+    this.mapLoaded = true;
+    this.createPoints(this.features);
+    this.startMapClickListener();
   }
 
   ngAfterContentInit(): void {
@@ -91,7 +90,6 @@ export class AtlasMapComponent implements OnInit, AfterContentInit {
 
   startMapClickListener(): void {
     this.map.addEventListener('click', (e) => {
-      console.log(e.position)
       this.onMapClick.emit(e.position);
       // On click you emit geo position
     });
@@ -167,7 +165,6 @@ export class AtlasMapComponent implements OnInit, AfterContentInit {
     }
     this.createPoints(features);
   }
-
 }
 
 

src/azure-map/utils/load-map.service.ts

@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {azureMapLazyLoader} from './azure-map-lazy-loader';
 import {fromPromise} from 'rxjs/observable/fromPromise';
 import {Subject} from 'rxjs';
-import { Observable } from "rxjs/Observable";
+import {Observable} from 'rxjs/Observable';
 
 @Injectable()
 export class LoadMapService {
@@ -16,13 +16,18 @@ export class LoadMapService {
   constructor() {
   }
 
-  load() {
+  load(): Observable<boolean> {
     if (!this.isLoaded) {
-      this.mapPromise = azureMapLazyLoader().then(() => {
+      return fromPromise(azureMapLazyLoader().then(() => {
         this.isLoaded = true;
-        this.loadedSubject.next(true);
-      })
-      return fromPromise(this.mapPromise);
+        return this.isLoaded;
+      }));
+    } else {
+      return Observable.of(true);
     }
   }
+
+  observableMap() {
+    return this.loadedSubject.asObservable();
+  }
 }

src/index.html

@@ -11,7 +11,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-<div style="width: 800px; height: 300px">
+<div style="width: 1800px; height: 900px">
   <am-map></am-map></div>
 </body>
 </html>