Map page added with map

src/app/dashboard/dashboard.module.ts

@@ -4,6 +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 { CurrencyPipe } from '@angular/common';
 
@@ -14,6 +15,7 @@ import { AddDataComponent } from './add-data.component';
 import { FeedbackComponent } from './feedback.component';
 import { TransactionLogComponent } from './transaction-log.component';
 import { PayrollLogComponent } from './payroll-log.component';
+import { MapComponent } from './map.component';
 
 import { GraphWidget } from '../widgets/graph-widget.component';
 import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
@@ -25,6 +27,9 @@ import { OrgTableComponent } from '../shared/org-table.component';
 import { TransactionResultComponent } from '../shared/transaction-result.component';
 import { PayrollResultComponent } from '../shared/payroll-result.component';
 
+// API key env variable import
+import { environment } from '../../environments/environment';
+
 @NgModule({
   imports: [
     // Angular imports
@@ -32,6 +37,9 @@ import { PayrollResultComponent } from '../shared/payroll-result.component';
     FormsModule,
     ReactiveFormsModule,
     ChartsModule,
+    AgmCoreModule.forRoot({
+      apiKey: environment.mapApiKey
+    }),
     BsDropdownModule,
     NgxPaginationModule,
     DashboardRoutingModule,
@@ -47,6 +55,7 @@ import { PayrollResultComponent } from '../shared/payroll-result.component';
     TransactionResultComponent,
     PayrollLogComponent,
     PayrollResultComponent,
+    MapComponent,
     FeedbackComponent,
     GraphWidget,
     OrgBarSnippetComponent,

src/app/dashboard/dashboard.routing.ts

@@ -13,6 +13,7 @@ import { AddDataComponent } from './add-data.component';
 import { FeedbackComponent } from './feedback.component';
 import { TransactionLogComponent } from './transaction-log.component';
 import { PayrollLogComponent } from './payroll-log.component';
+import { MapComponent } from './map.component';
 
 // Using child path to allow for FullLayout theming
 const routes: Routes = [
@@ -49,6 +50,12 @@ const routes: Routes = [
         component: TransactionLogComponent,
         data: { title: 'Transaction Log' },
       },
+      {
+        path: 'map',
+        component: MapComponent,
+        data: { title: 'Supplier Map' },
+        canActivate: [OrgGuard],
+      },
       {
         path: 'payroll-log',
         component: PayrollLogComponent,

src/app/dashboard/map.component.html

@@ -0,0 +1,19 @@
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <strong>Supplier Map</strong>
+          <small>Required Data marked in <strong>bold</strong>.</small>
+        </div>
+        <div class="card-block">
+          <!-- 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">
+            <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
+          </agm-map>
+        </div>
+      </div>
+    </div>
+  </div><!--/.row-->
+</div>

src/app/dashboard/map.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } 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 MapComponent implements OnInit {
+
+  lat: number = 54.0466;
+  lng: number = 2.8007;
+
+  constructor(
+    private http: Http,
+    private api: ApiService,
+  ) { }
+
+  ngOnInit(): void {
+
+  }
+
+}

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

@@ -40,6 +40,11 @@
             <i class="icon-envelope-letter"></i> Enter Feedback
           </a>
         </li>
+        <li  *ngIf="accountType == 'organisation'" class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/map']">
+            <i class="icon-envelope-letter"></i> Supplier Map
+          </a>
+        </li>
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/transaction-log']">
             <i class="icon-basket"></i> Transaction Log

src/scss/_custom.scss

@@ -14,6 +14,12 @@
     background-color: #0f81a8;
     color: #e8ebed;
 }
+
+// Map styling
+agm-map {
+  height: 300px;
+}
+
 // white title font variant on type-2 as defined in _widgets.css
 .horizontal-bars {
   padding: 0;