test page added

src/app/dashboard/dashboard.module.ts

@@ -20,6 +20,7 @@ import { PayrollLogComponent } from './payroll-log.component';
 import { LeaderboardComponent } from './leaderboard.component';
 import { MapComponent } from './map.component';
 import { TrailMapComponent } from './trail-map.component';
+import { TrailMapComponent2 } from './trail-map-2.component';
 
 import { GraphWidget } from '../widgets/graph-widget.component';
 import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
@@ -66,6 +67,7 @@ import { environment } from '../../environments/environment';
     LeaderboardResultComponent,
     MapComponent,
     TrailMapComponent,
+    TrailMapComponent2,
     FeedbackComponent,
     GraphWidget,
     OrgBarSnippetComponent,

src/app/dashboard/dashboard.routing.ts

@@ -16,6 +16,7 @@ import { PayrollLogComponent } from './payroll-log.component';
 import { LeaderboardComponent } from './leaderboard.component';
 import { MapComponent } from './map.component';
 import { TrailMapComponent } from './trail-map.component';
+import { TrailMapComponent2 } from './trail-map-2.component';
 
 // Using child path to allow for FullLayout theming
 const routes: Routes = [
@@ -68,6 +69,11 @@ const routes: Routes = [
         component: TrailMapComponent,
         data: { title: 'Story Trail' },
       },
+      {
+        path: 'story-trail-2',
+        component: TrailMapComponent2,
+        data: { title: 'Story Trail 2' },
+      },
       {
         path: 'payroll-log',
         component: PayrollLogComponent,

src/app/dashboard/trail-map-2.component.html

@@ -0,0 +1,41 @@
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <strong>Purchase Map</strong>
+          <small>Required Data marked in <strong>bold</strong>.</small>
+        </div>
+        <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-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
+                <agm-marker
+                    *ngFor="let m of markers"
+                    [iconUrl]="'/assets/img/map-pin-lis.png'"
+                    [latitude]="m.latitude"
+                    [longitude]="m.longitude"
+                    [openInfoWindow]="false"
+                    (markerClick)="onMarkerClick($event)">
+                </agm-marker>
+              </agm-marker-cluster>
+            </agm-map>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div><!--/.row-->
+</div>

src/app/dashboard/trail-map-2.component.ts

@@ -0,0 +1,70 @@
+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';
+import 'rxjs/add/operator/map';
+
+@Component({
+  templateUrl: 'trail-map-2.component.html',
+})
+export class TrailMapComponent2 implements OnInit {
+
+  lat: number = 54.0466;
+  lng: number = -2.8007;
+  zoom: number = 12;
+
+  dataReceived: string = 'yes';
+
+  markers: Array<{latitude: number, longitude: number, name: string}>;
+
+  map: any;
+
+  constructor(
+    private http: Http,
+    private api: ApiService,
+  ) { }
+
+  ngOnInit(): void { }
+
+  public onMapReady(map: any) {
+    this.map = map;
+  }
+
+  public onMarkerClick() {
+    
+  }
+
+  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: {
+        latitude:  resp.getNorthEast().lat(),
+        longitude: resp.getNorthEast().lng()
+      },
+      south_west: {
+        latitude:  resp.getSouthWest().lat(),
+        longitude: resp.getSouthWest().lng()
+      },
+    }
+    this.api.getMapData(mapData).subscribe(
+      result => {
+        this.dataReceived = 'yes';
+        this.markers = result.suppliers;
+      },
+      error => {
+        // this.dataReceived = 'no';
+        console.log('Retrieval Error');
+        console.log( error._body );
+      }
+    );
+  }
+
+
+
+}

src/app/layouts/full-layout.component.html

@@ -50,6 +50,11 @@
             <i class="icon-map"></i> Story Trail
           </a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/story-trail-2']">
+            <i class="icon-map"></i> Story Trail 2
+          </a>
+        </li>
         <li *ngIf="accountType == 'customer'" class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/leaderboard']">
             <i class="icon-basket"></i> Leaderboard