fix: shape selection

app/lib/pages/widgets/cloropleth_map.dart

 import 'dart:typed_data';
+import '../marker_handler/marker_data.dart';
 import 'package:flutter/material.dart';
 import 'package:syncfusion_flutter_maps/maps.dart';
 import 'dart:math';
-import '../marker_handler/marker_data.dart';
+import 'dart:convert';
 
 /// A class containing thickness data for each subdivision of the map.
 class IceThicknessModel {
-  IceThicknessModel(this.sub_div_id, this.thickness, this.color, this.isSelected);
+  IceThicknessModel(this.sub_div_id, this.thickness, this.color, this.savedColor);
 
   final String sub_div_id;
   final int thickness;
   Color color;
-  bool isSelected;
+  final Color savedColor;
 }
 
 /// ChoroplethMap is a stateful widget that contains a choropleth map.
 /// The map is created using the Syncfusion Flutter Maps library and
 /// coordinates fetched from the server.
 class ChoroplethMap extends StatefulWidget {
-  const ChoroplethMap({
-    Key? key,
+  const ChoroplethMap({Key? key,
     required this.relation,
-    required this.measurements,
+    required this.measurements
   }) : super(key: key);
 
   final Uint8List relation;
@@ -32,10 +32,11 @@ class ChoroplethMap extends StatefulWidget {
 }
 
 class _ChoroplethMapState extends State<ChoroplethMap> {
+  int selectedIndex = -1;
   late MapShapeSource mapShapeSource;
   late final MapZoomPanBehavior _zoomPanBehavior = MapZoomPanBehavior();
   List<IceThicknessModel> iceThicknessList = <IceThicknessModel>[];
-  List<Color> testColors = [
+  List<Color> testColors = [ // NB test color
     const Color(0xff8a003b),
     const Color(0xff8a4300),
     const Color(0xff8a7a00),
@@ -49,11 +50,11 @@ class _ChoroplethMapState extends State<ChoroplethMap> {
 
     final Random random = Random();
     for (int i = 0; i <= 120; i++) {
-      int ran = random.nextInt(4); // NB test color
+      int ran = random.nextInt(5); // NB test color
       Color randomColor = testColors[ran];
 
       int randomNumber = random.nextInt(21); // 0 -> 20, NB: temp test data
-      iceThicknessList.add(IceThicknessModel(i.toString(), randomNumber, randomColor, false));
+      iceThicknessList.add(IceThicknessModel(i.toString(), randomNumber, randomColor, randomColor));
     }
   }
 
@@ -64,23 +65,32 @@ class _ChoroplethMapState extends State<ChoroplethMap> {
         SfMaps(
           layers: [
             MapShapeLayer(
-              source: MapShapeSource.memory(
-                widget.relation,
+              source: MapShapeSource.memory( // Map polygon
+                widget.relation, // JSON coordinates from server
                 shapeDataField: 'sub_div_id',
                 dataCount: iceThicknessList.length,
                 primaryValueMapper: (int index) => iceThicknessList[index].sub_div_id,
                 shapeColorValueMapper: (int index) => iceThicknessList[index].color,
               ),
+              //color: Colors.blue.shade400, // Map color
               zoomPanBehavior: _zoomPanBehavior,
               strokeColor: Colors.black,
+              // Shape selection
+              selectedIndex: selectedIndex,
               onSelectionChanged: (int index) {
                 setState(() {
+                  selectedIndex = index;
                   for (int i = 0; i < iceThicknessList.length; i++) {
-                    iceThicknessList[i].isSelected = i == index;
-                    iceThicknessList[i].color = i == index ? Colors.red : iceThicknessList[i].color;
+                    iceThicknessList[i].color = i == index ? Colors.red : iceThicknessList[i].savedColor;
                   }
                 });
+                print("Selection triggered");
               },
+              selectionSettings: MapSelectionSettings(
+                color: Colors.orange,
+                strokeColor: Colors.red[900],
+                strokeWidth: 3,
+              ),
             ),
           ],
         ),
@@ -88,3 +98,4 @@ class _ChoroplethMapState extends State<ChoroplethMap> {
     );
   }
 }
+