Changed from dropdown to modal

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

@@ -4,11 +4,39 @@
       <div class="card">
         <div class="card-header">
           <strong>Story Trail</strong>
-          <small>Click a marker to get location details.</small>
+          <div class="row">
-          <select type="text" [(ngModel)]="assocMap" (ngModelChange)="viewBoundsChanged()">
+
-            <option value="lis" selected>Lancaster Independent Story</option>
+            <div class="col-12 col-sm-6 mb-3">
-            <option value="esta">ESTA</option>
+              <small>Select a Story Trail to see all the businesses in that story on the map.<br>
-          </select>
+              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">

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

@@ -14,6 +14,7 @@ export class TrailMapComponent implements OnInit, AfterViewInit {
   lng: number = -2.8007;
   zoom: number = 12;
   public modalRef: BsModalRef;
+  public modalRef2: BsModalRef;
   clickedMarker: any;
   assocMap = 'lis';
   assocLogo: string;
@@ -45,6 +46,10 @@ export class TrailMapComponent implements OnInit, AfterViewInit {
     this.modalRef = this.modalService.show(template);
   }
 
+  openModalAssoc(templateAssoc: TemplateRef<any>) {
+    this.modalRef2 = this.modalService.show(templateAssoc);
+  }
+
   public onMarkerClick(clickedMarker, template: TemplateRef<any>) {
     console.log(clickedMarker);
     this.clickedMarker = clickedMarker;