Fixes made and info window usage revamped with modals

.angular-cli.json

@@ -20,8 +20,7 @@
         "../node_modules/moment/min/moment.min.js"
       ],
       "styles": [
-        "scss/style.scss",
+        "scss/style.scss"
-        "../node_modules/snazzy-info-window/dist/snazzy-info-window.css"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

package-lock.json

@@ -14,11 +14,6 @@
       "resolved": "https://registry.npmjs.org/@agm/js-marker-clusterer/-/js-marker-clusterer-1.0.0-beta.2.tgz",
       "integrity": "sha512-sQzNo+2NwjgVAiy/AU3deYvemoH3CHtYvh+aH/3jq9yIK+2ZiuwhZ2oKmoBsVPEMzLjOqF07FhDLowrAAZfVRw=="
     },
-    "@agm/snazzy-info-window": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/@agm/snazzy-info-window/-/snazzy-info-window-1.0.0-beta.2.tgz",
-      "integrity": "sha512-YboKYJ2IzxY27XzGun4rHDw7I8BcHqfEgmzMR7bqSo1UH+JlgSNbuWfEQ2UvKqPlmW0bNm0o6xK8SfbE531QZA=="
-    },
     "@angular-devkit/core": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.0.20.tgz",

package.json

@@ -20,7 +20,6 @@
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
     "@agm/js-marker-clusterer": "1.0.0-beta.2",
-    "@agm/snazzy-info-window": "1.0.0-beta.2",
     "@angular/common": "5.0.1",
     "@angular/compiler": "5.0.1",
     "@angular/core": "5.0.1",

src/app/dashboard/dashboard.module.ts

@@ -6,7 +6,6 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
 import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
-import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window';
 import { ModalModule } from 'ngx-bootstrap/modal';
 
 import { CurrencyPipe } from '@angular/common';
@@ -47,7 +46,6 @@ import { environment } from '../../environments/environment';
       apiKey: environment.mapApiKey
     }),
     AgmJsMarkerClustererModule,
-    AgmSnazzyInfoWindowModule,
     BsDropdownModule,
     NgxPaginationModule,
     DashboardRoutingModule,

src/app/dashboard/map.component.html

@@ -6,36 +6,66 @@
           <strong>Purchase Map</strong>
           <small>Required Data marked in <strong>bold</strong>.</small>
         </div>
-        <div [ngSwitch]="dataReceived">
+        <div class="modal fade" bsModal #statusModal="bs-modal" [config]="{backdrop: false, animated: false}"
-          <div *ngSwitchCase="'no'"class="card-block">
+             tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
-            <div class="alert alert-danger" role="alert">
+          <div class="modal-dialog modal-sm h-100 d-flex flex-column justify-content-center my-0">
-              No map data received, check your connection.
+            <div class="modal-content">
+              <div class="modal-header">
+                <h4 class="modal-title pull-left">Status</h4>
+                <button type="button" class="close pull-right" aria-label="Close" (click)="statusModal.hide()">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
+                <div [ngSwitch]="dataReceived">
+                  <div *ngSwitchCase="'no'">
+                    <div class="alert alert-danger" role="alert">
+                      No map data received, check your connection.
+                    </div>
+                  </div>
+                  <div *ngSwitchCase="'loading'">
+                    <div class="alert alert-warning" role="alert">
+                      Map loading, please wait.
+                    </div>
+                  </div>
+                </div>
+              </div>
             </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>
+        <!-- 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]"
+                [openInfoWindow]="false"
+                (markerClick)="onMarkerClick(m, template)">
+            </agm-marker>
+          </agm-marker-cluster>
+        </agm-map>
+        <ng-template #template>
+          <div class="modal-header d-flex justify-content-between">
+            <img src="assets/img/lis_logo.png" class="w-15" alt="lis logo"><h4 class="modal-title">{{clickedMarker.name}}</h4>
+            <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body text-right">
+            <h5>Located at:</h5>
+            <h6>{{clickedMarker.street_name}}</h6>
+            <h6>{{clickedMarker.town}}</h6>
+            <h6>{{clickedMarker.postcode}}</h6>
+          </div>
+        </ng-template>
       </div>
     </div>
   </div><!--/.row-->

src/app/dashboard/map.component.ts

@@ -1,18 +1,22 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
 import { ApiService } from '../providers/api-service';
 import { AgmCoreModule } from '@agm/core';
+import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
 import 'rxjs/add/operator/map';
 
 @Component({
   templateUrl: 'map.component.html',
 })
-export class MapComponent implements OnInit {
+export class MapComponent implements OnInit, AfterViewInit {
-
+  @ViewChild('statusModal') myStatusModal: ModalDirective;
   lat: number = 54.0466;
   lng: number = -2.8007;
   zoom: number = 12;
+  public modalRef: BsModalRef;
+  clickedMarker: any;
 
-  dataReceived: string = 'yes';
+  dataReceived: string = 'loading';
 
   markers: Array<{latitude: number, longitude: number, name: string}>;
 
@@ -20,14 +24,29 @@ export class MapComponent implements OnInit {
 
   constructor(
     private api: ApiService,
+    private modalService: BsModalService,
   ) { }
 
   ngOnInit(): void { }
 
+  ngAfterViewInit() {
+    this.myStatusModal.show();
+  }
+
   public onMapReady(map: any) {
     this.map = map;
   }
 
+  openModal(template: TemplateRef<any>) {
+    this.modalRef = this.modalService.show(template);
+  }
+
+  public onMarkerClick(clickedMarker, template: TemplateRef<any>) {
+    console.log(clickedMarker);
+    this.clickedMarker = clickedMarker;
+    this.openModal(template);
+  }
+
   public viewBoundsChanged() {
     console.log("finding bounds");
     const resp = this.map.getBounds();
@@ -48,7 +67,7 @@ export class MapComponent implements OnInit {
     }
     this.api.getMapData(mapData).subscribe(
       result => {
-        this.dataReceived = 'yes';
+        this.myStatusModal.hide();
         this.markers = result.suppliers;
       },
       error => {

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

@@ -6,49 +6,67 @@
           <strong>Purchase Map</strong>
           <small>Required Data marked in <strong>bold</strong>.</small>
         </div>
-        <div [ngSwitch]="dataReceived">
+        <div class="modal fade" bsModal #statusModal="bs-modal" [config]="{backdrop: false, animated: false}"
-          <div *ngSwitchCase="'no'"class="card-block">
+             tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
-            <div class="alert alert-danger" role="alert">
+          <div class="modal-dialog modal-sm h-100 d-flex flex-column justify-content-center my-0">
-              No map data received, check your connection.
+            <div class="modal-content">
-            </div>
+              <div class="modal-header">
-          </div>
+                <h4 class="modal-title pull-left">Status</h4>
-          <div *ngSwitchCase="'yes'">
+                <button type="button" class="close pull-right" aria-label="Close" (click)="statusModal.hide()">
-            <!-- 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(m, template)">
-                </agm-marker>
-              </agm-marker-cluster>
-            </agm-map>
-            <ng-template #template>
-              <div class="modal-header d-flex justify-content-between">
-                <img src="assets/img/lis_logo.png" class="w-15" alt="lis logo"><h4 class="modal-title">{{clickedMarker.name}}</h4>
-                <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
                   <span aria-hidden="true">&times;</span>
                 </button>
               </div>
-              <div class="modal-body text-right">
+              <div class="modal-body">
-                <h5>Located at:</h5>
+                <div [ngSwitch]="dataReceived">
-                <h6>{{clickedMarker.street_name}}</h6>
+                  <div *ngSwitchCase="'no'">
-                <h6>{{clickedMarker.town}}</h6>
+                    <div class="alert alert-danger" role="alert">
-                <h6>{{clickedMarker.postcode}}</h6>
+                      No map data received, check your connection.
+                    </div>
+                  </div>
+                  <div *ngSwitchCase="'loading'">
+                    <div class="alert alert-warning" role="alert">
+                      Map loading, please wait.
+                    </div>
+                  </div>
+                </div>
               </div>
-            </ng-template>
+            </div>
           </div>
         </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
+        (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(m, template)">
+            </agm-marker>
+          </agm-marker-cluster>
+        </agm-map>
+        <ng-template #template>
+          <div class="modal-header d-flex justify-content-between">
+            <img src="assets/img/lis_logo.png" class="w-15" alt="lis logo"><h4 class="modal-title">{{clickedMarker.name}}</h4>
+            <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body text-right">
+            <h5>Located at:</h5>
+            <h6>{{clickedMarker.street_name}}</h6>
+            <h6>{{clickedMarker.town}}</h6>
+            <h6>{{clickedMarker.postcode}}</h6>
+          </div>
+        </ng-template>
       </div>
     </div>
   </div><!--/.row-->

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
+import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
 import { ApiService } from '../providers/api-service';
 import { AgmCoreModule } from '@agm/core';
 import { BsModalService } from 'ngx-bootstrap/modal';
@@ -8,15 +8,15 @@ import 'rxjs/add/operator/map';
 @Component({
   templateUrl: 'trail-map.component.html',
 })
-export class TrailMapComponent implements OnInit {
+export class TrailMapComponent implements OnInit, AfterViewInit {
-
+  @ViewChild('statusModal') myStatusModal: ModalDirective;
   lat: number = 54.0466;
   lng: number = -2.8007;
   zoom: number = 12;
   public modalRef: BsModalRef;
   clickedMarker: any;
 
-  dataReceived: string = 'yes';
+  dataReceived: string = 'loading';
 
   markers: Array<{latitude: number, longitude: number, name: string}>;
 
@@ -29,6 +29,10 @@ export class TrailMapComponent implements OnInit {
 
   ngOnInit(): void { }
 
+  ngAfterViewInit() {
+    this.myStatusModal.show();
+  }
+
   public onMapReady(map: any) {
     this.map = map;
   }
@@ -63,7 +67,7 @@ export class TrailMapComponent implements OnInit {
     }
     this.api.getLisData(mapData).subscribe(
       result => {
-        this.dataReceived = 'yes';
+        this.myStatusModal.hide();
         this.markers = result.locations;
       },
       error => {