2017-11-14 12:47:28 +00:00
|
|
|
<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"
|
2017-11-14 17:12:07 +00:00
|
|
|
[iconUrl]="'/assets/img/map-pin-lis.png'"
|
2017-11-14 12:47:28 +00:00
|
|
|
[latitude]="m.latitude"
|
2017-11-23 17:16:46 +00:00
|
|
|
[longitude]="m.longitude"
|
|
|
|
|
[openInfoWindow]="false"
|
|
|
|
|
(markerClick)="onMarkerClick(m, template)">
|
2017-11-14 12:47:28 +00:00
|
|
|
</agm-marker>
|
|
|
|
|
</agm-marker-cluster>
|
|
|
|
|
</agm-map>
|
2017-11-23 17:16:46 +00:00
|
|
|
<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">×</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>
|
2017-11-14 12:47:28 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div><!--/.row-->
|
|
|
|
|
</div>
|
