Allow configuration of legend (#12)

* adjust loading only during data fetching, display popup correct name and type error.

* add data folder into docker container

* adjust legend option in input json files and add detail button for DB urls.

* legend configuration into InputLayer

* add not defined category to legends

---------

Co-authored-by: Marius Heine <m.heine@geprog.com>

Author: alifarooq93

components/MyLeafletMap.vue

@@ -12,9 +12,15 @@ import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility
 const props = defineProps<{
   fetchedData?: GeoJSON.FeatureCollection | null
 }>();
+
 const emit = defineEmits<{
   (e: 'marker-click', feature: GeoJSON.Feature): void
 }>();
+
+const NO_VALUE_COLOR = '#999999';
+
+const { t } = useI18n();
+
 let selectedMarker: L.Layer | null = null;
 const originalMarkerStyleMap = new Map<L.Layer, L.PathOptions>();
 let legendControl: L.Control | null = null;
@@ -57,16 +63,23 @@ function generateLabels(data: GeoJSON.FeatureCollection): Map<string, string> {
   );
   const labelKey: string | undefined = data.features[0]?.properties?.options?.label_option;
   const key = labelKey ?? 'default';
+  const legendDetail = (data.features[0].properties?.options?.legend_details || []) as LegendDetails[];
 
-  const rawValues: (string | number)[] = data.features.map(f => findValueByKey(f, key) ?? 'default');
+  const rawValues = data.features.map(f => findValueByKey(f, key));
 
-  const uniqueValues: string[] = Array.from(
-    new Set(rawValues.map(v => String(v))),
+  const uniqueValues = Array.from(
+    new Set(rawValues.map(v => v === undefined ? undefined : String(v))),
   );
 
   if (legendDisplayOption[0] === 'default') {
-    uniqueValues.forEach((value, i) => {
-      colorMap.set(value, generateColor(i, uniqueValues.length));
+    uniqueValues.forEach((value) => {
+      if (value === undefined) {
+        return;
+      }
+      const match = legendDetail.find((item: LegendDetails) => item.label === value);
+      if (match?.color) {
+        colorMap.set(value, match.color);
+      }
     });
 
     legend.onAdd = function () {
@@ -76,36 +89,43 @@ function generateLabels(data: GeoJSON.FeatureCollection): Map<string, string> {
         'background: white; padding: 8px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);',
       );
 
-      uniqueValues.forEach((value) => {
-        const color = colorMap.get(value);
-        div.innerHTML += `
-        <div style="color:black; margin-bottom:4px;">
-            <i style="background:${color}; width:12px; height:12px; display:inline-block; margin-right:4px;"></i> ${value}
-        </div>`;
+      legendDetail.forEach(({ label, color }) => {
+        if (uniqueValues.includes(label)) {
+          div.innerHTML += `
+          <div style="color:black; margin-bottom:4px;">
+            <i style="background:${color}; width:12px; height:12px; display:inline-block; margin-right:4px;"></i> ${label}
+          </div>`;
+        }
       });
+      if (uniqueValues.includes(undefined)) {
+        div.innerHTML += `
+          <div style="color:black; margin-bottom:4px;">
+            <i style="background:${NO_VALUE_COLOR}; width:12px; height:12px; display:inline-block; margin-right:4px;"></i> ${t('notDefined')}
+          </div>`;
+      }
 
       return div;
     };
   }
   else if (legendDisplayOption[0] === 'colorVarient') {
     const numericValues: number[] = uniqueValues
+      .filter(v => v !== undefined)
       .map(v => +v)
       .filter(v => !Number.isNaN(v));
 
-    if (numericValues.length === 0)
-      return colorMap;
-
-    const min = Math.min(...numericValues);
-    const max = Math.max(...numericValues);
+    const bins: [number, number][] = [];
+    if (numericValues.length > 0) {
+      const min = Math.min(...numericValues);
+      const max = Math.max(...numericValues);
 
-    const numBins = 5;
-    const step = (max - min) / numBins;
+      const numBins = 5;
+      const step = (max - min) / numBins;
 
-    const bins: [number, number][] = [];
-    for (let i = 0; i < numBins; i++) {
-      const start = min + i * step;
-      const end = i === numBins - 1 ? max : start + step;
-      bins.push([start, end]);
+      for (let i = 0; i < numBins; i++) {
+        const start = min + i * step;
+        const end = i === numBins - 1 ? max : start + step;
+        bins.push([start, end]);
+      }
     }
 
     function getBinLabel(value: number): string {
@@ -137,6 +157,13 @@ function generateLabels(data: GeoJSON.FeatureCollection): Map<string, string> {
           </div>`;
       });
 
+      if (uniqueValues.includes(undefined)) {
+        div.innerHTML += `
+          <div style="color:black; margin-bottom:4px;">
+            <i style="background:${NO_VALUE_COLOR}; width:12px; height:12px; display:inline-block; margin-right:4px;"></i> ${t('notDefined')}
+          </div>`;
+      }
+
       return div;
     };
 
@@ -188,7 +215,7 @@ function renderMarkers(data: GeoJSON.FeatureCollection | undefined) {
       key = feature.properties?.__binLabel;
     }
 
-    const color = colorMap.get(key) ?? '#999';
+    const color = colorMap.get(key) ?? NO_VALUE_COLOR;
 
     const geoJsonLayer = L.geoJSON(feature, {
       style: () => ({

composables/dataTypes.ts

@@ -18,16 +18,22 @@ export interface MapDisplayOptions {
   title: string
 }
 
+export interface LegendDetails {
+  label: string
+  color: string
+}
+
 export interface Options {
   label_option: string
-  legend_option: string
+  legend_option: 'default' | 'colorVariant'
   type: string
   value_group: string
   coordinate_field_x?: string
   coordinate_field_y?: string
   display_option: 'popup' | 'line chart'
   popup_name?: string
   popup_details?: { label: string, prop: string | string[] }[]
+  legend_details?: LegendDetails[]
 }
 
 export interface UrlInfo {

data/bathingWaterInputLayer.json

@@ -107,6 +107,13 @@
     {
       "label_option": "EINSTUFUNG_ODER_VORABBEWERTUNG",
       "legend_option": "default",
+      "legend_details": [
+        { "label": "ausgezeichnet (Überprüfung nur bei Änderung der Einstufung)", "color": "#10B981" },
+        { "label": "gut (Überprüfung mindestens alle vier Jahre)", "color": "#0D9488" },
+        { "label": "ausreichend (Überprüfung mindestens alle 3 J)", "color": "#3B82F6" },
+        { "label": "mangelhaft (Überprüfung mindestens alle 2 J)", "color": "#FF0000" },
+        { "label": "neu", "color": "#8B5CF6" }
+      ],
       "type": "series",
       "value_group": "",
       "display_option": "popup",

data/treesInputLayer.json

@@ -20,6 +20,11 @@
     {
       "label_option": "typ",
       "legend_option": "default",
+      "legend_details": [
+        { "label": "Naturdenkmal", "color": "#10B981" },
+        { "label": "Städtischer Baum", "color": "#3B82F6" },
+        { "label": "Privater Baum", "color": "#0D9488" }
+      ],
       "type": "geo",
       "value_group": "",
       "display_option": "popup",

i18n/locales/de.json

@@ -12,5 +12,6 @@
   "organization": "Organisation",
   "datasetUrl": "Datensatz-URL",
   "name": "Name",
-  "seriesDatasets": "Serien-Datensätze"
+  "seriesDatasets": "Serien-Datensätze",
+  "notDefined": "Nicht definiert"
 }

i18n/locales/en.json

@@ -12,5 +12,6 @@
   "organization": "Organization",
   "datasetUrl": "Dataset url",
   "name": "Name",
-  "seriesDatasets": "Series Datasets"
+  "seriesDatasets": "Series Datasets",
+  "notDefined": "Not defined"
 }