Use Recoil State Management

components/MapComponent.js

@@ -7,18 +7,16 @@ import "leaflet-contextmenu";
 import * as config from "../config/config.js";
 import dynamic from "next/dynamic";
 import "leaflet.smooth_marker_bouncing";
-//import { OverlappingMarkerSpiderfier } from "../lib/OverlappingMarkerSpiderfier.js";
-//import { OverlappingMarkerSpiderfier } from "../public/js/OverlappingMarkerSpiderfier.js";
 import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
 import DataSheet from "../components/DataSheet";
+import { useRecoilState } from 'recoil';
+import { gisStationsStaticDistrictState } from '../features/gisStationState';
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz
   const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
-  const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useState(
-    []
-  ); // Zustand für statische Daten
+  const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState);
   const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState(
     []
   ); // Zustand für Statusdaten
@@ -560,11 +558,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
     // Alte Marker entfernen, indem alle Marker, die durch OMS verwaltet werden, gelöscht werden
     oms.clearMarkers();
-    /* map.eachLayer((layer) => {
+    map.eachLayer((layer) => {
       if (layer instanceof L.Marker) {
         map.removeLayer(layer);
       }
-    }); */
+    });
 
     // Neue Marker für jede Station hinzufügen
     GisStationsStaticDistrict.forEach((station) => {
@@ -637,6 +635,28 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           shadowAngle: null,
         });
         marker.bounce(3);
+      }
+           // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
+           if (station.LD_Name === "GMA Littwin (TEST)") {
+            marker.bindTooltip(
+              `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
+              {
+                permanent: true,
+                direction: "right",
+                opacity: 1, // Tooltip immer sichtbar
+                offset: L.point({ x: 10, y: 0 }),
+              }
+            ).addTo(GMA);
+          } else {
+            marker.bindTooltip(
+              `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
+              {
+                permanent: false,
+                direction: "right",
+                opacity: 0,
+                offset: L.point({ x: 10, y: 0 }),
+              }
+            ).addTo(GMA);
           }
       // Marker zu OMS und der Karte hinzufügen
       oms.addMarker(marker);
@@ -648,7 +668,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         ${statusInfo}<br>
       `);
       let LocID = station.IdLocation;
-      marker
+      /* marker
         .bindTooltip(
           `<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${LocID}</div>`,
           {
@@ -658,8 +678,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             offset: L.point({ x: 10, y: 0 }),
           }
         )
-        .addTo(GMA);
+        .addTo(GMA); */
     });
+ 
   }, [map, oms, GisStationsStaticDistrict, GisStationsStatusDistrict]);
 
   //------------------------------------------