update: add polygon with interactive markers

app/lib/pages/widgets/map_widget.dart

@@ -3,8 +3,9 @@ import '../marker_handler/marker_data.dart';
 import '../consts.dart';
 import 'quick_view_chart.dart';
 import 'stat_charts.dart';
-import 'osm_map.dart';
 import 'sat_layer.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:latlong2/latlong.dart';
 
 class MapContainerWidget extends StatefulWidget {
   final List<Measurement> markerList;
@@ -17,9 +18,9 @@ class MapContainerWidget extends StatefulWidget {
 
 class _MapContainerWidgetState extends State<MapContainerWidget> {
 
-  Measurement? selectedMarker; // Containing data for selected marker
-  bool isMinimized = true; // Quick view box state tacker
-  bool satLayer = false; // Satellite layer visibility tracker
+  Measurement? selectedMarker;  // Containing data for selected marker
+  bool isMinimized = true;      // Quick view box state tacker
+  bool satLayer = false;        // Satellite layer visibility tracker
 
   @override
   Widget build(BuildContext context) {
@@ -44,7 +45,76 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
                   SizedBox(
                     width: screenWidth * boxWidth,
                     height: screenWidth * boxHeight,
-                    child: OSMmap(markerList: widget.markerList), // OpenStreetMap layer
+                    child: FlutterMap(
+                      options: MapOptions(
+                        center: mapCenter,
+                        zoom: 9.0,
+                      ),
+                      children: [
+                        TileLayer(
+                          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                          subdomains: const ['a', 'b', 'c'],
+                        ),
+                        PolygonLayer(
+                          polygons: widget.markerList.map((Measurement measurement) {
+                            // Map corners to a list of LatLng objects
+                            List<LatLng> points = measurement.cornerList.map((Corner corner) {
+                              return LatLng(corner.latitude, corner.longitude);
+                            }).toList();
+
+                            return Polygon(
+                              points: points, // Use list of corner coordinates to render polygon
+                              color: Colors.blue.withOpacity(0.5),
+                              isFilled: true,
+                            );
+                          }).toList(),
+                        ),
+                        MarkerLayer(
+                          markers: widget.markerList.map((Measurement measurement) {
+
+                            List<LatLng> corners = measurement.cornerList.map((Corner corner) {
+                              return LatLng(corner.latitude, corner.longitude);
+                            }).toList();
+
+                            // point calculates the middle point between corners
+                            LatLng point(List<LatLng> coordinates) {
+                              double averageLatitude = 0.0;
+                              double averageLongitude = 0.0;
+
+                              for (LatLng point in coordinates) {
+                                averageLatitude += point.latitude;
+                                averageLongitude += point.longitude;
+                              }
+
+                              // Calculate average latitude and longitude
+                              averageLatitude /= coordinates.length;
+                              averageLongitude /= coordinates.length;
+
+                              return LatLng(averageLatitude, averageLongitude); // Return the middle point
+                            }
+
+                            return Marker(
+                              width: 50,
+                              height: 50, // NB: temporary point value
+                              point: point(corners),
+                              builder: (ctx) => GestureDetector(
+                                onTap: () {
+                                  setState(() {
+                                    selectedMarker = measurement;
+                                  });
+                                },
+                                child: const Icon(
+                                  Icons.severe_cold,
+                                  color: Colors.blue,
+                                  size: 30.0,
+                                ),
+                              ),
+                            );
+                          }).toList(),
+                        ),
+
+                      ],
+                    ),
                   ),
                   /*SizedBox(
                     width: screenWidth * boxWidth,

app/lib/pages/widgets/osm_map.dart

@@ -18,19 +18,6 @@ class OSMmap extends StatelessWidget {
     List<Polygon> polygons = [];
 
     // Map each element from markerList to a measurement object
-    markerList.forEach((Measurement measurement) {
-      // Map corners to a list of LatLng objects
-      List<LatLng> points = measurement.cornerList.map((Corner corner) {
-        return LatLng(corner.latitude, corner.longitude);
-      }).toList();
-
-      Polygon polygon = Polygon(
-        points: points, // Use list of corner coordinates to render polygon
-        color: Colors.blue.withOpacity(0.5),
-        isFilled: true,
-      );
-      polygons.add(polygon); // Add each polygon to a list
-    });
 
     return FlutterMap(
       options: MapOptions(