add: transparent OSM overlay

app/lib/widgets/main_layout.dart

@@ -33,8 +33,12 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
 
   Measurement? selectedTile;  // Containing data for selected marker
   bool isMinimized = true;      // Quick view box state tacker
+
   bool satLayer = false;        // Satellite layer visibility tracker
-  bool isTapped = false;        // Button tap state tracker
+  bool OSMlayer = false;
+
+  bool isSatTapped = false;        // Button tap state tracker, satellite
+  bool isMapTapped = false;        // Button tap state tracker, OSmap
 
   // Initialise lastUpdate variable from persistent storage if server fetch fails
   Future<void> checkAndSetLastUpdate() async {
@@ -98,21 +102,6 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
                       color: Colors.white12,
                     ),
                   ),
-                  SizedBox(
-                    width: screenWidth * boxWidth,
-                    height: screenWidth * boxHeight,
-                    child: Stack(
-                      children: [
-                        OSM(markerList: widget.markerList), // OSM widget as the bottom layer
-                        Positioned.fill(
-                          child: Container(
-                            color: Colors.grey.shade900.withOpacity(0.35), // Grey box with 50% opacity
-                            // Additional content or widgets can be added here
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
                   SizedBox( // Color coded lake polygon
                     width: screenWidth * boxWidth,
                     height: screenWidth * boxHeight,
@@ -124,6 +113,17 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
                         onSelectionChanged: handleSelection,),
                     ),
                   ),
+                  SizedBox(
+                    width: screenWidth * boxWidth,
+                    height: screenWidth * boxHeight,
+                    child: Visibility(
+                      visible: OSMlayer,
+                      child: Opacity(
+                        opacity: 0.7,
+                        child: OSM(markerList: widget.markerList),
+                      ),
+                    ),
+                  ),
                   Positioned( // Satellite button
                     top: 10,
                     right: 10,
@@ -146,6 +146,28 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
                       ),
                     ),
                   ),
+                  Positioned( // OSmap button
+                    top: 50,
+                    right: 10,
+                    child: GestureDetector(
+                      onTap: () {
+                        setState(() {
+                          OSMlayer = !OSMlayer; // Toggle satellite layer state on press
+                        });
+                      },
+                      child: Container(
+                        padding: const EdgeInsets.all(8),
+                        decoration: OSMlayer ? const BoxDecoration( // Add decoration only when pressed
+                          shape: BoxShape.circle,
+                          color: Colors.grey,
+                        ) : null,
+                        child: const Icon(
+                          Icons.map,
+                          color: Colors.white54,
+                        ),
+                      ),
+                    ),
+                  ),
                   Positioned( // No wifi icon
                     top: 80,
                     right: 10,
@@ -169,7 +191,7 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
                         visible: !widget.serverConnection,
                         child: Container(
                           padding: const EdgeInsets.all(8),
-                          decoration: isTapped ? const BoxDecoration(
+                          decoration: isSatTapped ? const BoxDecoration(
                             shape: BoxShape.circle,
                             color: Colors.blue,
                           ) : null,