Starting to add popup to gridsquare map (not populated)

application/views/gridsquares/index.php

@@ -35,4 +35,41 @@
 			[This grid square map is publically viewable for sharing]
 		</div>
 	<?php } ?>
+</div>
+
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-xl" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">QSOs in Square: <span id="square_number"></span></h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+		<table class="table table-sm">
+		  <thead class="thead-dark">
+		    <tr>
+		      <th scope="col">Date/Time</th>
+		      <th scope="col">Callsign</th>
+		      <th scope="col">Mode</th>
+		      <th scope="col">Band</th>
+		      <th scope="col">Confirmation</th>
+		    </tr>
+		  </thead>
+		  <tbody>
+		    <tr>
+		      <th scope="row"></th>
+		      <td></td>
+		      <td></td>
+		      <td></td>
+		    </tr>
+		  </tbody>
+		</table>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
 </div>

application/views/interface_assets/footer.php

@@ -888,6 +888,11 @@ $(document).ready(function(){
     var locator = LatLng2Loc(lat,lng, 10);
     var loc_4char = locator.substring(0, 4);
     console.log(loc_4char);
+    console.log(map.getZoom());
+    if(map.getZoom() > 5) {
+      $('#square_number').text(loc_4char);
+      $('#exampleModal').modal('show');
+    }
   };
 
 <?php if ($this->uri->segment(1) == "gridsquares" && $this->uri->segment(2) == "band") { ?>