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

<div class="animated fadeIn">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header">
          <strong>Story Trail</strong>
          <div class="row">

            <div class="col-12 col-sm-6 mb-3">
              <small>Select a Story Trail to see all the businesses in that story on the map.<br>
              Click an icon on the map to get more information.</small>
            </div>
            <div class="col-12 col-sm-6 order-12">
              <button type="button" class="btn btn-outline-info btn-lg float-right" (click)="openModalAssoc(templateAssoc)">Select Story Trail</button>
            </div>
          </div>
          <ng-template #templateAssoc>
            <div class="modal-header">
              <h4 class="modal-title pull-left">Select View</h4>
              <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef2.hide()">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-12 col-sm-6 text-center">
                  <img src="assets/img/association/lis-logo.png" class="w-50" alt="lis logo"><br>
                  <button type="button" class="btn btn-success mt-3" (click)="modalRef2.hide(); assocMap = 'lis'">Lancaster Independent Story</button>
                </div>
                <div class="col-12 col-sm-6 text-center">
                  <img src="assets/img/association/esta-logo.png" class="w-50" alt="lis logo"><br>
                  <button type="button" class="btn btn-success mt-3" (click)="modalRef2.hide(); assocMap = 'esta'">ESTA Association</button>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" (click)="modalRef2.hide()">Close</button>
            </div>
          </ng-template>
        </div>
        <div class="modal fade" bsModal #statusModal="bs-modal" [config]="{backdrop: false, animated: false}"
             tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-sm h-100 d-flex flex-column justify-content-center my-0">
            <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>
        <!-- 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()">
          <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/association/' + assocMap + '-map-pin.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="{{assocLogo}}" 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-->
</div>