diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts
index 341e833..62efd93 100644
--- a/src/app/dashboard/dashboard.module.ts
+++ b/src/app/dashboard/dashboard.module.ts
@@ -18,6 +18,7 @@ import { TransactionLogComponent } from './transaction-log.component';
 import { PayrollLogComponent } from './payroll-log.component';
 import { LeaderboardComponent } from './leaderboard.component';
 import { MapComponent } from './map.component';
+import { TrailMapComponent } from './trail-map.component';
 
 import { GraphWidget } from '../widgets/graph-widget.component';
 import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
@@ -62,6 +63,7 @@ import { environment } from '../../environments/environment';
     LeaderboardComponent,
     LeaderboardResultComponent,
     MapComponent,
+    TrailMapComponent,
     FeedbackComponent,
     GraphWidget,
     OrgBarSnippetComponent,
diff --git a/src/app/dashboard/dashboard.routing.ts b/src/app/dashboard/dashboard.routing.ts
index 9794cfe..46b9df3 100644
--- a/src/app/dashboard/dashboard.routing.ts
+++ b/src/app/dashboard/dashboard.routing.ts
@@ -15,6 +15,7 @@ import { TransactionLogComponent } from './transaction-log.component';
 import { PayrollLogComponent } from './payroll-log.component';
 import { LeaderboardComponent } from './leaderboard.component';
 import { MapComponent } from './map.component';
+import { TrailMapComponent } from './trail-map.component';
 
 // Using child path to allow for FullLayout theming
 const routes: Routes = [
@@ -62,6 +63,11 @@ const routes: Routes = [
         component: MapComponent,
         data: { title: 'Purchase Map' },
       },
+      {
+        path: 'story-trail',
+        component: TrailMapComponent,
+        data: { title: 'Story Trail' },
+      },
       {
         path: 'payroll-log',
         component: PayrollLogComponent,
diff --git a/src/app/dashboard/trail-map.component.html b/src/app/dashboard/trail-map.component.html
new file mode 100644
index 0000000..bcff523
--- /dev/null
+++ b/src/app/dashboard/trail-map.component.html
@@ -0,0 +1,43 @@
+<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"
+                    [latitude]="m.latitude"
+                    [longitude]="m.longitude"
+                    [label]="m.name[0]">
+
+                  <agm-info-window>
+                    <strong>{{m.name}}</strong>
+                  </agm-info-window>
+                </agm-marker>
+              </agm-marker-cluster>
+            </agm-map>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div><!--/.row-->
+</div>
diff --git a/src/app/dashboard/trail-map.component.ts b/src/app/dashboard/trail-map.component.ts
new file mode 100644
index 0000000..2b6df1f
--- /dev/null
+++ b/src/app/dashboard/trail-map.component.ts
@@ -0,0 +1,66 @@
+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: 'map.component.html',
+})
+export class TrailMapComponent 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 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 );
+      }
+    );
+  }
+
+
+
+}
diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html
index 959ef60..069a864 100644
--- a/src/app/layouts/full-layout.component.html
+++ b/src/app/layouts/full-layout.component.html
@@ -45,6 +45,11 @@
             <i class="icon-map"></i> Purchase Map
           </a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/story-trail']">
+            <i class="icon-map"></i> Story Trail
+          </a>
+        </li>
         <li *ngIf="accountType == 'customer'" class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/leaderboard']">
             <i class="icon-basket"></i> Leaderboard