update: non-functional color mapping

app/lib/pages/widgets/cloropleth_map.dart

 import 'dart:typed_data';
-import 'package:latlong2/latlong.dart';
 import '../marker_handler/marker_data.dart';
 import 'package:flutter/material.dart';
 import 'package:syncfusion_flutter_maps/maps.dart';
+import 'dart:math';
 
 /// A class containing thickness for each subdivision of the map.
 class IceThicknessModel {
   IceThicknessModel(this.subDivID, this.thickness);
 
-  final int subDivID;
-  final double thickness;
+  final String subDivID;
+  final int thickness;
 }
 
 /// A stateful widget which contains a choropleth map.
@@ -36,6 +36,12 @@ class _ChoroplethMapState extends State<ChoroplethMap> {
   @override
   void initState() {
     super.initState();
+
+    final Random random = Random();
+    for (int i = 0; i <= 100; i++) {
+      int randomNumber = random.nextInt(21); // 0 -> 20
+      iceThicknessList.add(IceThicknessModel(i.toString(), randomNumber));
+    }
   }
 
   @override
@@ -45,9 +51,39 @@ class _ChoroplethMapState extends State<ChoroplethMap> {
           MapShapeLayer(
             source: MapShapeSource.memory(
               widget.relation,
-              shapeDataField: 'geometry',
+              shapeDataField: 'properties.SubDivID',
+              dataCount: iceThicknessList.length,
+              primaryValueMapper: (int index) => iceThicknessList[index].subDivID,
+              shapeColorValueMapper: (int index) => iceThicknessList[index].thickness,
+              shapeColorMappers: const [
+                MapColorMapper(
+                  from: null,  // Default color
+                  color: Colors.grey,
+                  text: 'No value',
+                ),
+                MapColorMapper(
+                    from: 0,
+                    to: 3,
+                    color: Color.fromRGBO(223,169,254, 1),
+                    text: '0-3'),
+                MapColorMapper(
+                    from: 3,
+                    to: 8,
+                    color: Color.fromRGBO(190,78,253, 1),
+                    text: '3-8'),
+                MapColorMapper(
+                    from: 8,
+                    to: 15,
+                    color: Color.fromRGBO(167,17,252, 1),
+                    text: '8-15'),
+                MapColorMapper(
+                    from: 15,
+                    to: 20,
+                    color: Color.fromRGBO(170,20,250, 1),
+                    text: '15-20'),
+              ],
             ),
-            color: Colors.orange,
+            color: Colors.lightBlueAccent,
             zoomPanBehavior: _zoomPanBehavior,
           ),
         ],

server/map/get_relation.py

@@ -20,7 +20,7 @@ def get_relation(self, body_of_water: str):
     tiles = divide_relation(polygons)
 
     # Convert GeoDataFrame to GeoJSON
-    tiles_json = polygon_data.to_json()
+    tiles_json = tiles.to_json()
 
     # Set headers
     self.send_response(200)
@@ -33,7 +33,7 @@ def get_relation(self, body_of_water: str):
 
 def divide_relation(polygons):
     # Define tile size
-    tile_size = 0.01
+    tile_size = 0.05
     subdiv_id = 0
     tiles = []