Add map size toggle button to trip page

Closes: #178

static/js/map.js

@@ -153,5 +153,25 @@ function build_map(map_id, coordinates, routes) {
         }
     });
 
+    var mapElement = document.getElementById(map_id);
+
+    document.getElementById('toggleMapSize').addEventListener('click', function() {
+      var mapElement = document.getElementById(map_id);
+      var isFullWindow = mapElement.classList.contains('full-window-map');
+
+      if (isFullWindow) {
+        mapElement.classList.remove('full-window-map');
+        mapElement.classList.add('half-map');
+        mapElement.style.position = 'relative';
+      } else {
+        mapElement.classList.add('full-window-map');
+        mapElement.classList.remove('half-map');
+        mapElement.style.position = '';
+      }
+
+      // Ensure the map adjusts to the new container size
+      map.invalidateSize();
+    });
+
     return map;
 }

templates/trip_page.html

@@ -52,8 +52,24 @@
   /* Additional styling for grid items can go here */
 }
 
-#map {
-  height: 90vh;
+.half-map {
+  height: 100vh;
+}
+
+.full-window-map {
+  position: fixed; /* Make the map fixed position */
+  top: 56px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999; /* Make sure it sits on top */
+}
+
+#toggleMapSize {
+  position: fixed;  /* Fixed position */
+  top: 66px;        /* 10px from the top */
+  right: 10px;      /* 10px from the right */
+  z-index: 10000;   /* Higher than the map's z-index */
 }
 
 </style>
@@ -296,7 +312,9 @@
     </div>
   </div>
   <div class="col-md-6 col-sm-12">
-    <div id="map"></div>
+    <button id="toggleMapSize" class="btn btn-primary mb-2">Toggle map size</button>
+    <div id="map" class="half-map">
+    </div>
   </div>
 </div>
 {% endblock %}