createAndSetMarkers in createAndSetDevices umbenennt

utils/createAndSetDevices.js

@@ -0,0 +1,82 @@
+// /utils/createAndSetDevices.js
+import circleIcon from "../components/gisPolylines/icons/CircleIcon";
+import { saveLineData, redrawPolyline } from "./mapUtils";
+import L from "leaflet";
+import "leaflet.smooth_marker_bouncing";
+import { toast } from "react-toastify";
+import * as config from "../config/config.js";
+// Funktion zum Erstellen und Setzen von Markern
+export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
+  try {
+    const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
+    const jsonResponse = await response1.json();
+    const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
+    const statusResponse = await response2.json();
+
+    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.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).map((station) => {
+        //console.log("Station: ", station);
+        const statis = statisMap.get(station.IdLD);
+        //console.log("Statis: ", statis);
+        const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;
+        //console.log("Icon Path: ", iconPath);
+
+        const priority = determinePriority(iconPath, priorityConfig);
+        //console.log("Priority: ", priority);
+        //console.log("statis.Le: ", statis.Le);
+        const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
+        //console.log("Z-Index Offset: ", zIndexOffset);
+
+        const marker = L.marker([station.X, station.Y], {
+          icon: L.icon({
+            iconUrl: iconPath,
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+          }),
+          areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
+          link: station.Link,
+          zIndexOffset: zIndexOffset,
+        });
+
+        // Überprüfe, ob die bounce-Funktion verfügbar ist und verwende sie
+        if (typeof marker.bounce === "function" && statis) {
+          marker.on("add", () => marker.bounce(3));
+        } else if (statis) {
+          //console.error("Bounce function is not available on marker");
+        }
+
+        const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
+          .reverse()
+          .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("");
+
+        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>
+                <span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
+                <span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
+                <div class="mt-2">${statusInfo}</div>
+              </div>
+            `);
+
+        return marker;
+      });
+
+      setMarkersFunction(markersData);
+    }
+  } catch (error) {
+    //console.error("Error fetching data: ", error);
+  }
+};

utils/markerUtils.js

@@ -124,7 +124,7 @@ const determinePriority = (iconPath, priorityConfig) => {
 };
 
 // Funktion zum Erstellen und Setzen von Markern
-export const createAndSetMarkers = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
+export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
   try {
     const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
     const jsonResponse = await response1.json();