update: InteractivePolygon

app/lib/pages/widgets/interactive_polygon.dart

 import 'package:flutter/material.dart';
 import '../marker_handler/marker_data.dart';
+import 'package:latlong2/latlong.dart' as latLng;
 
-// InteractivePolygon returns a Polygon object wrapped in a GestureDetector
-// in order to make the Polygon clickable
+// InteractivePolygon returns a Polygon object wrapped in a CustomPaint,
+// which is then wrapped in a GestureDetector. This is in order to make the Polygon clickable
 class InteractivePolygon extends StatelessWidget {
-  final List<Offset> points;
+  final List<latLng.LatLng> points;
   final void Function(Measurement)? onTap;
   final Color color;
   final double strokeWidth;
@@ -24,7 +25,8 @@ class InteractivePolygon extends StatelessWidget {
       child: CustomPaint(
         painter: PolygonPainter(
           points: points,
-          color: color,
+          bodyColor: color,
+          borderColor: Colors.deepOrange,
           strokeWidth: strokeWidth,
         ),
       ),
@@ -35,39 +37,81 @@ class InteractivePolygon extends StatelessWidget {
 // PolygonPainter takes the points, color, and stroke width from a
 // object of type InteractivePolygon, and renders it
 class PolygonPainter extends CustomPainter {
-  final List<Offset> points;
-  final Color color;
+  final List<latLng.LatLng> points;
+  final Color bodyColor;
+  final Color borderColor;
   final double strokeWidth;
 
   PolygonPainter({
     required this.points,
-    required this.color,
+    required this.bodyColor,
     required this.strokeWidth,
+    required this.borderColor,
   });
 
   // paint() iterates through all the vertices of the polygon and connects
   // each sequential pair with a line
   @override
   void paint(Canvas canvas, Size size) {
-    final paint = Paint()
+
+    final Paint body = Paint();
+    body
+      ..color = bodyColor
+      ..style = PaintingStyle.fill
+      ..strokeWidth = 0;
+
+    final Paint border = Paint();
+    border
+      ..color = borderColor
+      ..style = PaintingStyle.stroke
+      ..strokeCap = StrokeCap.round
+      ..strokeWidth = 1.0;
+
+    final path = Path();
+    if (points.isNotEmpty) {
+      final firstPoint = points.first;
+      path.moveTo(firstPoint.latitude, firstPoint.longitude);
+
+      for (var i = 1; i < points.length; i++) {
+        final point = points[i];
+        path.lineTo(point.latitude, point.longitude);
+      }
+
+      path.close();
+      canvas.drawPath(path, body); // Render body
+      canvas.drawPath(path, border); // Render border
+    }
+    else {
+      print("Error in rendering polygon. No points provided");
+    }
+
+    /*final paint = Paint()
       ..color = color
       ..style = PaintingStyle.stroke
       ..strokeWidth = strokeWidth;
 
     final path = Path();
-    path.moveTo(points[0].dx, points[0].dy);
-    for (var i = 1; i < points.length; i++) {
-      path.lineTo(points[i].dx, points[i].dy); // Render line between vertices
-    }
-    path.close();
+    if (points.isNotEmpty) {
+      final firstPoint = points.first;
+      path.moveTo(firstPoint.latitude, firstPoint.longitude);
 
-    canvas.drawPath(path, paint);
+      for (var i = 1; i < points.length; i++) {
+        final point = points[i];
+        path.lineTo(point.latitude, point.longitude);
+      }
+
+      path.close();
+      canvas.drawPath(path, paint);
+    }
+    else {
+      print("Error in rendering polygon. No points provided");
+    }*/
   }
 
   @override
   bool shouldRepaint(PolygonPainter oldDelegate) {
     return oldDelegate.points != points ||
-        oldDelegate.color != color ||
+        oldDelegate.bodyColor != bodyColor ||
         oldDelegate.strokeWidth != strokeWidth;
   }
-}
\ No newline at end of file
+}

app/lib/pages/widgets/map_widget.dart

@@ -6,6 +6,7 @@ import 'stat_charts.dart';
 import 'sat_layer.dart';
 import 'package:flutter_map/flutter_map.dart';
 import 'interactive_polygon.dart';
+import 'package:latlong2/latlong.dart' as latLng;
 
 
 /// MapContainerWidget is the main widget that contains the map with all
@@ -69,21 +70,9 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
                           urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                           subdomains: const ['a', 'b', 'c'],
                         ),
-                        /*PolygonLayer(
-                          polygons: widget.markerList.map((Measurement measurement) {
-
-                            return Polygon(
-                              points: points, // Use list of corner coordinates to render polygon
-                              color: Colors.blue.withOpacity(0.5),
-                              isFilled: true,
-                            );
-                          }).toList(),
-                        ),*/
                         // Custom polygon class for clickable polygons
                         InteractivePolygon(
-                          // Map corner coordinates for each measurement to Offset object
-                          points: widget.markerList.expand((measurement) => measurement.corners.map((corner) =>
-                              Offset(corner.latitude, corner.longitude))).toList(),
+                          points: widget.markerList.expand((measurement) => measurement.corners).toList(),
                           onTap: (Measurement measurement) { // Pass current measurement to onTap
                             setState(() {
                               selectedMarker = measurement; // Set selectedMarker to clicked measurement
@@ -103,10 +92,10 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
                                     selectedMarker = measurement;
                                   });
                                 },
-                                child: const Icon(
+                                child: Icon(
                                   Icons.severe_cold,
-                                  color: Colors.blue,
-                                  size: 30.0,
+                                  color: measurement == selectedMarker ? Colors.green : Colors.blue,
+                                  size:  measurement == selectedMarker ? 40.0 : 30.0,
                                 ),
                               ),
                             );