DBC22-1129: fixed z-index and hierarchy for map components

Author: ray-oxd

src/frontend/src/Components/Map.js

@@ -5,7 +5,6 @@ import { useSelector, useDispatch } from 'react-redux'
 import { updateMapState } from '../slices/mapSlice';
 
 // Third party packages
-import { useMediaQuery } from '@uidotdev/usehooks';
 import Button from 'react-bootstrap/Button';
 
 // FA
@@ -92,7 +91,6 @@ export default function MapWrapper({
 
   // Misc
   const navigate = useNavigate();
-  const largeScreen = useMediaQuery('only screen and (min-width : 768px)');
 
   function centerMyLocation(coordinates) {
     if (mapView.current) {
@@ -658,7 +656,30 @@ export default function MapWrapper({
 
   return (
     <div className="map-container">
-      <div ref={mapElement} className="map" />
+      <div ref={mapElement} className="map">
+        <div className="zoom-btn">
+          <Button className="zoom-in" variant="primary" onClick={zoomIn}>
+            <FontAwesomeIcon icon={faPlus} />
+          </Button>
+          <div className="zoom-divider" />
+          <Button
+            className="zoom-out"
+            variant="primary"
+            onClick={zoomOut}>
+            <FontAwesomeIcon icon={faMinus} />
+          </Button>
+        </div>
+
+        {!isPreview && (
+          <Button
+            className="map-btn my-location"
+            variant="primary"
+            onClick={toggleMyLocation}>
+            <FontAwesomeIcon icon={faLocationCrosshairs} />
+            My location
+          </Button>
+        )}
+      </div>
 
       <div id="popup" onClick={cameraDetailRoute} className="ol-popup">
         <FontAwesomeIcon
@@ -690,29 +711,6 @@ export default function MapWrapper({
         </Button>
       )}
 
-      {!isPreview && (!iconClicked || largeScreen) && (
-        <Button
-          className="map-btn my-location"
-          variant="primary"
-          onClick={toggleMyLocation}>
-          <FontAwesomeIcon icon={faLocationCrosshairs} />
-          My location
-        </Button>
-      )}
-
-      <div className="zoom-btn">
-        <Button className="zoom-in" variant="primary" onClick={zoomIn}>
-          <FontAwesomeIcon icon={faPlus} />
-        </Button>
-        <div className="zoom-divider" />
-        <Button
-          className="zoom-out"
-          variant="primary"
-          onClick={zoomOut}>
-          <FontAwesomeIcon icon={faMinus} />
-        </Button>
-      </div>
-
       {!isPreview && (
         <div>
           <RouteSearch />

src/frontend/src/Components/Map.scss

@@ -1,6 +1,23 @@
 @import "../styles/variables.scss";
 @import '~ol/ol.css';
 
+// Z-index
+.ol-overlaycontainer-stopevent {
+  z-index: 20 !important;
+
+  .ol-overlay-container {
+    z-index: 10;
+  }
+
+  .ol-scale-line {
+    z-index: 5;
+  }
+}
+
+.zoom-btn, .my-location {
+  z-index: 5;
+}
+
 .map-wrap {
   position: absolute;
   top: 50px;
@@ -23,10 +40,10 @@
     .ol-overlay-container:not(:has(> img)) {
       //overriding openlayers dynamic styles for mobile layout except for having img as a direct child
       @media (max-width: 575px) {
-          position: fixed !important;
-          bottom: 0 !important;
-          transform: none !important;
-        }
+        position: fixed !important;
+        bottom: 0 !important;
+        transform: none !important;
+      }
 
       .ol-popup {
         width: 100vw;