SVG background image and icon from iconify icons router example

public/img/icons/icon-background.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="8.81834mm" height="14.4621mm"
+     viewBox="0 0 25 41">
+
+  <path id="outer"
+        fill="blue"            
+        stroke="black"        
+        stroke-width="0.3"
+        d="M 5.06,3.88
+           C 5.06,3.88 19.50,3.62 19.50,3.62
+             19.50,3.62 21.46,4.30 22.27,5.27
+             23.18,6.36 22.94,7.75 22.94,7.75
+             22.94,7.75 23.06,21.56 23.06,21.56
+             23.06,21.56 22.60,22.51 21.81,23.28
+             21.18,23.90 20.19,24.38 20.19,24.38
+             20.19,24.38 19.69,24.91 16.00,25.75
+             16.00,25.75 15.68,26.94 15.23,28.59
+             14.21,32.32 12.56,38.38 12.56,38.38
+             12.56,38.38 11.14,31.76 10.12,28.00
+             9.64,26.21 9.12,25.69 9.12,25.69
+             9.12,25.69 5.35,24.98 5.26,24.91
+             5.26,24.91 4.05,24.45 3.38,23.69
+             2.62,22.83 2.19,21.75 2.19,21.75
+             2.19,21.75 2.06,7.19 2.06,7.19
+             1.52,7.21 4.36,3.90 5.06,3.88 Z" />
+  
+
+  <path id="inner"
+        fill="lightgreen"      
+        stroke="black"         
+        stroke-width="0.3"
+        d="M 4.35,6.43
+           C 3.69,7.15 3.38,8.00 3.38,8.00
+             3.38,8.00 3.66,21.56 3.66,21.56
+             3.66,21.56 4.24,22.28 5.00,22.87
+             5.65,23.37 6.65,23.57 6.65,23.57
+             7.75,23.59 19.44,23.19 19.44,23.19
+             19.44,23.19 20.28,22.92 20.91,22.22
+             21.42,21.66 21.83,21.26 21.83,21.26
+             21.83,21.26 21.75,7.94 21.75,8.06
+             21.75,8.14 21.49,6.96 20.78,6.17
+             20.33,5.68 19.31,5.44 19.31,5.44
+             19.31,5.44 5.75,5.44 5.75,5.44
+             5.75,5.44 4.86,5.88 4.35,6.43 Z" />
+</svg>

public/img/icons/marker-icon-20.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19v-4q0-.825.588-1.412T5 13h10V9h2v4h2q.825 0 1.413.588T21 15v4q0 .825-.587 1.413T19 21zm2-3q.425 0 .713-.288T8 17t-.288-.712T7 16t-.712.288T6 17t.288.713T7 18m3.5 0q.425 0 .713-.288T11.5 17t-.288-.712T10.5 16t-.712.288T9.5 17t.288.713t.712.287m3.5 0q.425 0 .713-.288T15 17t-.288-.712T14 16t-.712.288T13 17t.288.713T14 18m.25-9.75L12.8 6.8q.65-.6 1.45-.95T16 5.5t1.75.35t1.45.95l-1.45 1.45q-.35-.35-.788-.55T16 7.5t-.963.2t-.787.55m-2.5-2.5l-1.4-1.4q1.1-1.1 2.55-1.725T16 2t3.1.625t2.55 1.725l-1.4 1.4q-.825-.825-1.912-1.287T16 4t-2.337.463T11.75 5.75"/></svg>

utils/createAndSetDevices.js

@@ -4,16 +4,56 @@ import "leaflet.smooth_marker_bouncing";
 import { SERVER_URL } from "../config/urls.js";
 import * as config from "../config/config.js";
 
-// Funktion zur Bestimmung der Farbklasse basierend auf der Priorität
+// Variable zum Speichern der Prioritätskonfiguration (z.B. Level und Farben)
-const getColorClass = (level) => {
+let priorityConfig = [];
-  if (level === 1) return "red";
+
-  if (level === 2) return "orange";
+// Funktion zum Abrufen der Prioritätsdaten von der API
-  if (level === 3) return "yellow";
+const fetchPriorityConfig = async () => {
-  return "green"; // Standardfarbe
+  try {
+    // Ruft die API auf, um die Prioritätsdaten zu laden
+    const response = await fetch(`${SERVER_URL}:3000/api/prio`);
+
+    // Konvertiert die Antwort in ein JSON-Format
+    const data = await response.json();
+
+    // Gibt die empfangenen Daten in der Konsole aus, um die Struktur zu überprüfen
+    // console.log("Prioritätsdaten: ", data);
+
+    // Speichert die empfangenen Prioritätsdaten in der Variablen priorityConfig
+    priorityConfig = data;
+  } catch (error) {
+    // Gibt einen Fehler in der Konsole aus, falls die API nicht erreichbar ist
+    console.error("Fehler beim Abrufen der Prioritätsdaten: ", error);
+  }
 };
 
+// Funktion zur Bestimmung der Farbe basierend auf dem Level
+const getColorClass = (level) => {
+  // Sucht in priorityConfig nach einem Objekt, dessen level-Wert dem übergebenen Level entspricht
+  const priority = priorityConfig.find((p) => p.level === level);
+
+  // Gibt die Farbe zurück, wenn das Level gefunden wurde, ansonsten die Standardfarbe (#999999)
+  return priority ? priority.color : "#999999"; // Fallback-Farbe, wenn kein Level gefunden wurde
+};
+
+// Ruft die Funktion zum Abrufen der Prioritätsdaten auf und wartet, bis sie abgeschlossen ist
+fetchPriorityConfig().then(() => {
+  // Gibt die geladenen Prioritätsdaten in der Konsole aus, um zu überprüfen, ob die Daten korrekt geladen wurden
+  console.log("Prioritätsdaten wurden geladen:", priorityConfig);
+
+  // Testet die Funktion getColorClass für verschiedene Level und gibt die entsprechenden Farben aus
+  console.log("Farbe für Level 0:", getColorClass(0)); // Farbe für Level 0 anzeigen
+  console.log("Farbe für Level 1:", getColorClass(1)); // Farbe für Level 1 anzeigen
+  console.log("Farbe für Level 2:", getColorClass(2)); // Farbe für Level 2 anzeigen
+  console.log("Farbe für Level 3:", getColorClass(3)); // Farbe für Level 3 anzeigen
+  console.log("Farbe für Level 4:", getColorClass(4)); // Farbe für Level 4 anzeigen
+  console.log("Farbe für Level 100:", getColorClass(100)); // Farbe für Level 100 anzeigen
+  console.log("Farbe für Level 101:", getColorClass(101)); // Farbe für Level 101 anzeigen
+});
+
 // Funktion zum Erstellen und Setzen von Markern
-export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
+// Funktion zum Erstellen und Setzen von Markern
+export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic) => {
   try {
     // Lade die statischen Daten
     const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
@@ -21,48 +61,66 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
 
     const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
     const statusResponse = await response2.json();
+    console.log("statusResponse: ", statusResponse);
 
     const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
 
     if (jsonResponse.Points && statusResponse.Statis) {
       const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
 
-      let markersData = jsonResponse.Points
+      let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).map((station) => {
-        .filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1)
+        // Statusdaten für die Station abrufen
-        .map((station) => {
+        const statisForStation = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD);
-          const statis = statisMap.get(station.IdLD);
 
-          // Priorität und Farbklasse bestimmen
+        // Niedrigstes Level ermitteln
-          const priorityConfigForStation = priorityConfig.find((p) => p.location_id === station.IdLD);
+        const minLevel = Math.min(...statisForStation.map((status) => status.Le));
-          const level = priorityConfigForStation ? priorityConfigForStation.prio_level : 5; // Standardlevel
-          const colorClass = getColorClass(level); // Farbklasse ermitteln
 
-          // Dynamische CSS-Filter verwenden
+        // Farbe für das niedrigste Level bestimmen
-          const marker = L.marker([station.X, station.Y], {
+        const color = getColorClass(minLevel); // Farbe anhand des Levels
-            icon: L.divIcon({
-              className: `leaflet-marker-icon ${colorClass}`, // Dynamische CSS-Klasse für Filter
-              html: `<img src="img/icons/marker-icon-${station.Icon}.png" style="filter: hue-rotate(${level * 30}deg);" />`, // Dynamischer Filter
-              iconSize: [25, 41],
-              iconAnchor: [12, 41],
-              popupAnchor: [1, -34],
-            }),
-            zIndexOffset: 100 * (6 - level), // Z-Index nach Priorität
-          });
 
-          // Popup-Info dynamisch erstellen
+        console.log(`Station: ${station.LD_Name}, Min Level: ${minLevel}, Color: ${color}`);
-          const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
+
-            .reverse()
+        // **CSS-Filter für dynamische Einfärbung des Icons**
-            .map(
+        const marker = L.marker([station.X, station.Y], {
-              (status) => `
+          icon: L.divIcon({
+            className: `custom-marker`,
+            html: `
+              <div style="
+                width: 25px;
+                height: 41px;
+                background-image: url('img/icons/icon-background.svg'); /* SVG als Hintergrund */
+                background-size: cover; /* Passt SVG an Größe an */
+                position: relative;">
+                <img src="img/icons/marker-icon-${station.Icon}.svg" 
+                  style="position: absolute; 
+                         top: 4px;    /* Höher verschieben (weniger Pixel) */
+                         left: 4px;   /* Weiter nach links verschieben */
+                         width: 17px; /* Optional anpassen für zentrierte Größe */
+                         height: 17px; 
+                         filter: hue-rotate(${minLevel * 30}deg) brightness(0) saturate(100%) 
+                         drop-shadow(0 0 3px ${color});" 
+                  class="marker-icon-${minLevel}" />
+              </div>`,
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+          }),
+          zIndexOffset: 100 * (6 - minLevel),
+        });
+
+        // Popup-Info dynamisch erstellen
+        const statusInfo = statisForStation
+          .map(
+            (status) => `
                 <div class="flex items-center my-1">
                   <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
                   ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
                 </div>
               `
-            )
+          )
-            .join("");
+          .join("");
 
-          marker.bindPopup(`
+        marker.bindPopup(`
             <div class="bg-white rounded-lg">
               <span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
               <span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
@@ -72,23 +130,22 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
             </div>
           `);
 
-          // **Mouseover zeigt Popup**
+        // **Mouseover zeigt Popup**
-          marker.on("mouseover", function () {
+        marker.on("mouseover", function () {
-            this.openPopup();
+          this.openPopup();
-          });
-
-          // **Mouseout schließt Popup**
-          marker.on("mouseout", function () {
-            this.closePopup();
-          });
-
-          return marker;
         });
 
+        // **Mouseout schließt Popup**
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+
+        return marker;
+      });
+
       setMarkersFunction(markersData);
     }
   } catch (error) {
     console.error("Fehler beim Abrufen der Daten: ", error);
   }
 };
-