update: mapshapesource.network

app/lib/pages/widgets/cloropleth_map.dart

-import 'dart:convert';
+import 'package:app/pages/consts.dart';
 import 'package:flutter/material.dart';
 import 'package:syncfusion_flutter_maps/maps.dart';
 
@@ -19,20 +19,12 @@ class _ChoroplethMapState extends State<ChoroplethMap> {
   @override
   void initState() {
     super.initState();
-    final geoJsonData = json.decode(widget.relation); // Decode the JSON string
-    final coordinates = geoJsonData['features'][0]['geometry']['coordinates'][0];
-
     setState(() {
-      mapShapeSource = MapShapeSource.asset(
-        widget.relation,
+      mapShapeSource = const MapShapeSource.network(
+        '${serverURI}get_relation', // Request map coordinates from server
         shapeDataField: 'coordinates',
-        dataCount: coordinates.length,
-        primaryValueMapper: (int index) {
-          return 'lake'; // NB: temp hardcoded value, no subdivisions yet
-        },
       );
     });
-
   }
 
   @override

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 in a CustomPaint, in a GestureDetector
-// in order to make the polygon clickable
-class InteractivePolygon extends StatelessWidget {
-  final List<latLng.LatLng> points;
-  final void Function(Measurement)? onTap;
-  final Color color;
-  final double strokeWidth;
-
-  InteractivePolygon({
-    required this.points,
-    required this.onTap,
-    this.color = Colors.blue,
-    this.strokeWidth = 1.0,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: () {
-      },
-      child: CustomPaint(
-        painter: PolygonPainter(
-          points: points,
-          bodyColor: color,
-          borderColor: Colors.deepOrange,
-          strokeWidth: strokeWidth,
-        ),
-      ),
-    );
-  }
-}
-
-// PolygonPainter is a custom polygon renderer for Measurement objects
-// NB: from https://www.kindacode.com/article/flutter-custompaint-and-custompainter/
-class PolygonPainter extends CustomPainter {
-  final List<latLng.LatLng> points;
-  final Color bodyColor;
-  final Color borderColor;
-  final double strokeWidth;
-
-  PolygonPainter({
-    required this.points,
-    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 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) {
-      print("\n");
-      for (final coord in points) {
-        print("Corner: ${coord.latitude}, ${coord.longitude}");
-      }
-
-      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");
-    }
-  }
-
-  @override
-  bool shouldRepaint(PolygonPainter oldDelegate) {
-    return oldDelegate.points != points ||
-        oldDelegate.bodyColor != bodyColor ||
-        oldDelegate.strokeWidth != strokeWidth;
-  }
-}

app/lib/pages/widgets/map_widget.dart

@@ -5,10 +5,7 @@ import 'quick_view_chart.dart';
 import 'stat_charts.dart';
 import 'sat_layer.dart';
 import 'package:flutter_map/flutter_map.dart';
-import 'interactive_polygon.dart';
 import 'cloropleth_map.dart';
-import 'package:latlong2/latlong.dart' as latLng;
-
 
 /// MapContainerWidget is the main widget that contains the map with all
 /// its layers, polygons and markers.
@@ -76,15 +73,6 @@ class _MapContainerWidgetState extends State<MapContainerWidget> {
                           urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                           subdomains: const ['a', 'b', 'c'],
                         ),
-                        // Custom polygon class for clickable polygons
-                        InteractivePolygon(
-                          points: widget.markerList.expand((measurement) => measurement.corners).toList(),
-                          onTap: (Measurement measurement) { // Pass current measurement to onTap
-                            setState(() {
-                              selectedMarker = measurement; // Set selectedMarker to clicked measurement
-                            });
-                          },
-                        ),
                         MarkerLayer(
                           markers: widget.markerList.map((Measurement measurement) {
 

server/map/get_relation.py

@@ -8,7 +8,7 @@ def get_relation(self, body_of_water: string):
     with open("server/map/" + body_of_water.lower() + ".geojson") as f:
         data = json.load(f)
 
-    # Convert data to JSON string
+    # Convert response data to JSON string
     response_json = json.dumps(data)
 
     # Set headers