Added API and fixes

src/app/dashboard/dashboard.module.ts

@@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ChartsModule } from 'ng2-charts/ng2-charts';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { NgxPaginationModule } from 'ngx-pagination';
-import { AgmCoreModule } from '@agm/core';
+import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
 
 import { CurrencyPipe } from '@angular/common';
 
@@ -62,7 +62,8 @@ import { environment } from '../../environments/environment';
     GraphPanel,
   ],
   providers: [
-    CurrencyPipe
+    CurrencyPipe,
+    GoogleMapsAPIWrapper,
   ],
 })
 export class DashboardModule { }

src/app/dashboard/map.component.html

@@ -6,11 +6,26 @@
           <strong>Supplier Map</strong>
           <small>Required Data marked in <strong>bold</strong>.</small>
         </div>
-          <!-- this creates a google map on the page with the given lat/lng from -->
-          <!-- the component as the initial center of the map: -->
-          <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [scaleControl]="true">
-            <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
-          </agm-map>
+        <div [ngSwitch]="dataReceived">
+          <div *ngSwitchCase="'no'"class="card-block">
+            <div class="alert alert-danger" role="alert">
+              No map data received, check your connection.
+            </div>
+          </div>
+          <div *ngSwitchCase="'yes'">
+            <!-- this creates a google map on the page with the given lat/lng from -->
+            <!-- the component as the initial center of the map: -->
+            <agm-map
+            (mapReady)="onMapReady($event)"
+              [latitude]="lat"
+              [longitude]="lng"
+              [zoom]="zoom"
+              [scaleControl]="true"
+              (idle)="viewBoundsChanged($event)">
+              <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
+            </agm-map>
+          </div>
+        </div>
       </div>
     </div>
   </div><!--/.row-->

src/app/dashboard/map.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { ApiService } from '../providers/api-service';
 import { AgmCoreModule } from '@agm/core';
@@ -13,13 +13,47 @@ export class MapComponent implements OnInit {
   lng: number = -2.8007;
   zoom: number = 12;
 
+  dataReceived: string = 'yes';
+
+  map: any;
+
   constructor(
     private http: Http,
     private api: ApiService,
   ) { }
 
-  ngOnInit(): void {
+  ngOnInit(): void { }
 
+  public onMapReady(map: any) {
+    this.map = map;
   }
 
+  public viewBoundsChanged() {
+    console.log("finding bounds");
+    const resp = this.map.getBounds();
+    console.log("found bounds");
+    console.log(resp.getNorthEast().lat());
+    console.log(resp.getNorthEast().lng());
+    console.log(resp.getSouthWest().lat());
+    console.log(resp.getSouthWest().lng());
+    const mapData = {
+      north_east_lat: resp.getNorthEast().lat(),
+      north_east_lng: resp.getNorthEast().lng(),
+      south_west_lat: resp.getSouthWest().lat(),
+      south_west_lng: resp.getSouthWest().lng()
+    };
+    this.api.getMapData(mapData).subscribe(
+      result => {
+        this.dataReceived = 'yes';
+      },
+      error => {
+        // this.dataReceived = 'no';
+        console.log('Retrieval Error');
+        console.log( error._body );
+      }
+    );
+  }
+
+
+
 }

src/app/providers/api-service.ts

@@ -264,6 +264,15 @@ export class ApiService {
     ).map( response => response.json() );
   }
 
+  // Initial Map Data
+  public getMapData(data) {
+    data.session_key = this.sessionKey;
+    return this.http.post(
+    this.apiUrl + '/map',
+    data
+    ).map( response => response.json() );
+  }
+
   // Basic Customer User stats API
   public basicStats() {
     const key = this.sessionKey;