Different colors for actual use polygons + code comments

backend/lib/BieMetadata/MetadataObject.cs

@@ -1,6 +1,5 @@
 using MongoDB.Bson;
 using MongoDB.Bson.Serialization.Attributes;
-// ReSharper disable InconsistentNaming
 
 namespace BieMetadata;
 
@@ -75,6 +74,12 @@ public class AdditionalData
         /// Table data populated by the data pipeline. Contains the name and the size of the all .yaml files correlated to that specific dataset.
         /// </summary>
         public List<TableData> Tables { get; set; } = new List<TableData>();
+
+        /// <summary>
+        /// A polygon coloring rule for different values.
+        /// </summary>
+        [BsonIgnoreIfNull] // Add this attribute to ignore null values
+        public PolygonColoring? PolygonColoring { get; set; }
     }
 
     /// <summary>
@@ -113,4 +118,19 @@ public class DisplayProperty
         // The value to show
         public string value { get; set; } = string.Empty;
     }
+
+    /// <summary>
+    /// Polygon coloring rules
+    /// </summary>
+    public class PolygonColoring
+    {
+        public string attributeName { get; set; } = string.Empty;
+        public List<PolygonColor> colors { get; set; } = new List<PolygonColor>();
+    }
+
+    public class PolygonColor
+    {
+        public string color { get; set; } = string.Empty;
+        public List<string> values { get; set; } = new List<string>();
+    }
 }

backend/metadata-database/init-db.js

@@ -29,6 +29,7 @@ const datasets = [
       MinZoomLevel: -1,
       MarkersThreshold: -1,
       DisplayProperty: [],
+      PolygonColoring: null,
       Tables: [],
     },
   },
@@ -46,7 +47,8 @@ const datasets = [
       LongDescription: `A map of EV charging stations displays the locations of electric vehicle charging points located in Germany, helping drivers plan routes and manage charging needs. It is essential for supporting the adoption and convenience of electric vehicles.`,
       MinZoomLevel: 11,
       MarkersThreshold: -1,
-      DisplayProperty: [{ displayName: "Operator", value: "text" }],
+      DisplayProperty: [{ displayName: "Operator", value: "operator" }],
+      PolygonColoring: null,
       Tables: [],
     },
   },
@@ -65,6 +67,7 @@ const datasets = [
       MinZoomLevel: 11,
       MarkersThreshold: 17,
       DisplayProperty: [],
+      PolygonColoring: null,
       Tables: [],
     },
   },
@@ -81,8 +84,55 @@ const datasets = [
       DataType: "SHAPE",
       LongDescription: `The Actual Use map describes the use of the earth's surface in four main groups (settlement, traffic, vegetation and water bodies). The division of these main groups into almost 140 different types of use, such as residential areas, road traffic, agriculture or flowing water, enables detailed evaluations and analyses of the use of the earth's surface.`,
       MinZoomLevel: 11,
-      MarkersThreshold: 17,
+      MarkersThreshold: 15,
       DisplayProperty: [],
+      PolygonColoring: {
+        attributeName: "nutzart",
+        colors: [
+          {
+            color: "DarkOrchid",
+            values: [
+              "Wohnbaufläche",
+              "Industrie- und Gewerbefläche",
+              "Halde",
+              "Bergbaubetrieb",
+              "Tagebau, Grube Steinbruch",
+              "Fläche gemischter Nutzung",
+              "Fläche besonderer funktionaler Prägung",
+              "Sport-, Freizeit- und Erholungsfläche",
+              "Friedhof",
+            ],
+          },
+          {
+            color: "green",
+            values: ["Wald", "Gehölz", "Sumpf"],
+          },
+          {
+            color: "yellow",
+            values: [
+              "Landwirtschaft",
+              "Heide",
+              "Moor",
+              "Unland/Vegetationslose Fläche",
+            ],
+          },
+          {
+            color: "RosyBrown",
+            values: [
+              "Straßenverkehr",
+              "Weg",
+              "Platz",
+              "Bahnverkehr",
+              "Flugverkehr",
+              "Schiffsverkehr",
+            ],
+          },
+          {
+            color: "Cyan",
+            values: ["Fließgewässer", "Hafenbecken", "Stehendes Gewässer"],
+          },
+        ],
+      },
       Tables: [],
     },
   },
@@ -91,15 +141,16 @@ const datasets = [
       DatasetId: "building_models",
       Name: "Building Models",
       ShortDescription: `Simplified 3D building models.`,
-      Icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M136.83,220.43a8,8,0,0,1-11.09,2.23A183.15,183.15,0,0,0,24,192a8,8,0,0,1,0-16,199.11,199.11,0,0,1,110.6,33.34A8,8,0,0,1,136.83,220.43ZM24,144a8,8,0,0,0,0,16,214.81,214.81,0,0,1,151.17,61.71,8,8,0,1,0,11.2-11.42A230.69,230.69,0,0,0,24,144Zm208,16a216.51,216.51,0,0,0-48.59,5.49q8.24,6.25,16,13.16A201.53,201.53,0,0,1,232,176a8,8,0,0,1,0,16c-6,0-11.93.29-17.85.86q8.32,8.67,15.94,18.14a8,8,0,1,1-12.48,10A247,247,0,0,0,24,128a8,8,0,0,1,0-16,266.33,266.33,0,0,1,48,4.37V80a8,8,0,0,1,3.2-6.4l64-48a8,8,0,0,1,9.6,0l64,48A8,8,0,0,1,216,80v32.49c5.31-.31,10.64-.49,16-.49a8,8,0,0,1,0,16,246.3,246.3,0,0,0-84.26,14.69q9.44,5,18.46,10.78A232.2,232.2,0,0,1,232,144a8,8,0,0,1,0,16ZM120,88h48a8,8,0,0,1,8,8v21.94q11.88-2.56,24-4V84L144,42,88,84v35.81q12.19,3,24,7.18V96A8,8,0,0,1,120,88Zm8.07,45.27A262.48,262.48,0,0,1,160,121.94V104H128v29.24Z"></path></svg>',
+      Icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M104,216V152h48v64h64V120a8,8,0,0,0-2.34-5.66l-80-80a8,8,0,0,0-11.32,0l-80,80A8,8,0,0,0,40,120v96Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>',
     },
     additionalData: {
-      Icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M136.83,220.43a8,8,0,0,1-11.09,2.23A183.15,183.15,0,0,0,24,192a8,8,0,0,1,0-16,199.11,199.11,0,0,1,110.6,33.34A8,8,0,0,1,136.83,220.43ZM24,144a8,8,0,0,0,0,16,214.81,214.81,0,0,1,151.17,61.71,8,8,0,1,0,11.2-11.42A230.69,230.69,0,0,0,24,144Zm208,16a216.51,216.51,0,0,0-48.59,5.49q8.24,6.25,16,13.16A201.53,201.53,0,0,1,232,176a8,8,0,0,1,0,16c-6,0-11.93.29-17.85.86q8.32,8.67,15.94,18.14a8,8,0,1,1-12.48,10A247,247,0,0,0,24,128a8,8,0,0,1,0-16,266.33,266.33,0,0,1,48,4.37V80a8,8,0,0,1,3.2-6.4l64-48a8,8,0,0,1,9.6,0l64,48A8,8,0,0,1,216,80v32.49c5.31-.31,10.64-.49,16-.49a8,8,0,0,1,0,16,246.3,246.3,0,0,0-84.26,14.69q9.44,5,18.46,10.78A232.2,232.2,0,0,1,232,144a8,8,0,0,1,0,16ZM120,88h48a8,8,0,0,1,8,8v21.94q11.88-2.56,24-4V84L144,42,88,84v35.81q12.19,3,24,7.18V96A8,8,0,0,1,120,88Zm8.07,45.27A262.48,262.48,0,0,1,160,121.94V104H128v29.24Z"></path></svg>',
+      Icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M104,216V152h48v64h64V120a8,8,0,0,0-2.34-5.66l-80-80a8,8,0,0,0-11.32,0l-80,80A8,8,0,0,0,40,120v96Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>',
       Type: "areas",
       LongDescription: `The building models have a 3D object of each building plus additional information on its dimentions.`,
       MinZoomLevel: 11,
       MarkersThreshold: 17,
       DisplayProperty: [],
+      PolygonColoring: null,
       Tables: [],
     },
   },

backend/src/BIE.Core/BIE.Core.API/DatasetHandlers/CsvDatasetHandler.cs

@@ -71,7 +71,7 @@ public string GetDataInsideArea(BoundingBox boundingBox)
                 {
                     "properties", new Dictionary<string, object>
                     {
-                        { "text", $"{row["operator"]}" }
+                        { "operator", $"{row["operator"]}" }
                     }
                 }
             };

frontend/package.json

@@ -33,13 +33,17 @@
     "proj4leaflet": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-leaflet": "^4.2.1"
+    "react-leaflet": "^4.2.1",
+    "three": "^0.166.1",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@types/leaflet": "^1.9.12",
     "@types/node": "^20.12.12",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@types/three": "^0.166.0",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",

frontend/src/App.css

@@ -2,7 +2,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%; 
+  width: 100%;
   height: 100%;
   overflow: hidden;
 }
@@ -12,30 +12,35 @@
   overflow: hidden;
   height: 100%;
   position: relative;
+  padding: 0.6rem;
 }
 
 .multi-map {
   position: relative;
   width: 50%;
-  transition: width 0.5s; 
-  padding-top: 10px;
-  padding-left: 0px;
-  padding-bottom: 10px;
+  transition: width 0.5s;
+}
+
+.multimap-container {
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-right: 10px;
+  position: relative;
 }
 
 .data-view {
   width: 50%;
   position: relative;
-  transition: width 0.5s; 
+  transition: width 0.5s;
   overflow: hidden;
   box-sizing: border-box;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-right:10px;
 }
 
 .hidden {
-  width: 0; 
+  width: 0;
   overflow: hidden;
   padding: 0px;
 }
@@ -44,21 +49,14 @@
   width: 100%;
 }
 
-.multimap-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  height: 100%;
-}
-
-.toggle-button {
+.toggle-data-view-button {
   position: absolute;
   z-index: 5;
-  top: 13px; 
-  right: 0px; 
-  align-self: end; 
+  top: 7px;
+  right: 0px;
+  align-self: end;
   padding: 0;
-  padding-top:3px;
+  padding-top: 3px;
   align-items: center;
   justify-content: center;
   min-width: 2rem;
@@ -82,4 +80,4 @@
 .toggle-button:focus {
   color: black;
   border-color: black;
-}
+}