add: info button

app/lib/widgets/main_layout.dart

@@ -39,6 +39,8 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
   bool isSatTapped = false;        // Satellite button tap state tracker
   bool isMapTapped = false;        // OSM button tap state tracker
 
+  bool showColorMeanings = false;  // Additional color legend visibility
+
   Measurement? selectedMeasurement = selectedMeasurements[0];
 
   // Initialise lastUpdate variable from persistent storage if server fetch fails
@@ -73,6 +75,46 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
     });
   }
 
+  // _buildLegendItem renders a colored circle and text to form a legend
+  Widget _legendItem(Color color, String text) {
+    return Row(
+      children: [
+        Container(
+          width: 20,
+          height: 20,
+          decoration: BoxDecoration(
+            color: color,
+            shape: BoxShape.circle,
+          ),
+        ),
+        const SizedBox(width: 8),
+        Text(
+          text,
+          style: const TextStyle(
+            fontSize: 14,
+            color: Colors.white,
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// Builds an additional legend to explain the colors
+  Widget _buildLegend() {
+    return Column(
+      children: [
+        _legendItem(const Color(0xffff0000), "Very unsafe"),
+        const SizedBox(height: 10),
+        _legendItem(const Color(0xffff6a00), "Unsafe"),
+        const SizedBox(height: 10),
+        _legendItem(const Color(0xFFb1ff00), "Safe"),
+        const SizedBox(height: 10),
+        _legendItem(const Color(0xFF00d6ff), "Very safe"),
+        const SizedBox(height: 10),
+      ],
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     // Initialise selectedMarker to first element in markerList
@@ -216,6 +258,28 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
                       ),
                     ),
                   ),
+                  Positioned( // Color info button
+                    top: 130,
+                    right: 10,
+                    child: GestureDetector(
+                      onTap: () {
+                        setState(() {
+                          showColorMeanings = !showColorMeanings; // Toggle satellite layer state on press
+                        });
+                      },
+                      child: Container(
+                        padding: const EdgeInsets.all(8),
+                        decoration: showColorMeanings ? const BoxDecoration( // Add decoration only when pressed
+                          shape: BoxShape.circle,
+                          color: Colors.grey,
+                        ) : null,
+                        child: const Icon(
+                          Icons.info,
+                          color: Colors.white54,
+                        ),
+                      ),
+                    ),
+                  ),
                 ],
               ),
             ),
@@ -246,7 +310,7 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
                   child: Align(
                     alignment: Alignment.topLeft,
                     child: Padding(
-                      padding: const EdgeInsets.only(top: 20, left: 30), // Updated padding
+                      padding: const EdgeInsets.only(top: 20, left: 30), // Custom padding
                       child: Column(
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
@@ -255,7 +319,7 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
                             style: titleStyle,
                           ),
                           const Divider(),
-                          const SizedBox(height: 10), // Reduced padding
+                          const SizedBox(height: 10),
                           Text(
                             'Tile ID: ${selectedSubDiv?.sub_div_id}',
                             style: regTextStyle,