From 82ac370c5577fa0b9dfee7a17448ccc59dbda6c8 Mon Sep 17 00:00:00 2001
From: ISA <ismail.ali@littwin-systemtechnik.de>
Date: Thu, 25 Apr 2024 18:58:17 +0200
Subject: [PATCH] =?UTF-8?q?poiLayerRef=20popup=20per=20mouseover=20und=20v?=
 =?UTF-8?q?erschieben=20aber=20poi=20in=20MySQL-DB-Tabelle=20hinzuf=C3=BCg?=
 =?UTF-8?q?en=20noch=20nicht?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MapComponent.js | 44 +++++++++++++++++++++++++-------------
 store/mapLayersState.js    | 28 ++++++++++++------------
 2 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 41a4e7442..7a90093ca 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -15,7 +15,7 @@ import { gisSystemStaticState } from "../store/gisSystemState";
 import { mapLayersState } from "../store/mapLayersState";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
-  const dbLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
+  const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz
   const [oms, setOms] = useState(null); // State für OMS-Instanz
@@ -552,7 +552,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map]);
   //-------------------- // Diese useEffect wird nur beim ersten Rendering oder wenn sich `map` ändert, ausgeführt
   // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
-  useEffect(() => {
+/*   useEffect(() => {
     // Remove old markers
     if (map) {
       // Entfernen der alten DBLayer und Erstellung einer neuen
@@ -590,31 +590,31 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.addTo(dbLayer);
       });
     }
-  }, [map, locations, onLocationUpdate]);
+  }, [map, locations, onLocationUpdate]); */
 
   //------------------------------------------
 
   useEffect(() => {
     // Initialisierung der dbLayer, wenn die Karte verfügbar ist
-    if (map && !dbLayerRef.current) {
-      dbLayerRef.current = new L.LayerGroup().addTo(map);
+    if (map && !poiLayerRef.current) {
+      poiLayerRef.current = new L.LayerGroup().addTo(map);
     }
 
     return () => {
-      if (map && dbLayerRef.current) {
+      if (map && poiLayerRef.current) {
         // Entfernen der dbLayer bei Unmount
-        map.removeLayer(dbLayerRef.current);
-        dbLayerRef.current = null;
+        map.removeLayer(poiLayerRef.current);
+        poiLayerRef.current = null;
       }
     };
   }, [map]); // Dieser Effekt läuft nur, wenn sich `map` ändert
   //------------------------------------------
   useEffect(() => {
-    if (map && dbLayerRef.current) {
+    if (map && poiLayerRef.current) {
       // Sicherstellen, dass die alte dbLayer entfernt wird
-      map.removeLayer(dbLayerRef.current);
-      dbLayerRef.current = new L.LayerGroup().addTo(map);
-
+      map.removeLayer(poiLayerRef.current);
+      poiLayerRef.current = new L.LayerGroup().addTo(map);
+  
       locations.forEach((location) => {
         const { latitude, longitude } = parsePoint(location.position);
         const marker = L.marker([latitude, longitude], {
@@ -627,7 +627,20 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           draggable: true,
           id: location.idPoi,
         });
-
+  
+        // Popup binden, aber nicht automatisch öffnen
+        marker.bindPopup(
+          `<b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
+        );
+  
+        // Event-Handler für Mouseover und Mouseout hinzufügen
+        marker.on("mouseover", function() {
+          this.openPopup();
+        });
+        marker.on("mouseout", function() {
+          this.closePopup();
+        });
+  
         marker.on("dragend", function (e) {
           const newLat = e.target.getLatLng().lat;
           const newLng = e.target.getLatLng().lng;
@@ -636,11 +649,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             onLocationUpdate(markerId, newLat, newLng);
           });
         });
-
-        marker.addTo(dbLayerRef.current);
+  
+        marker.addTo(poiLayerRef.current);
       });
     }
   }, [map, locations, onLocationUpdate]); // Dieser Effekt läuft, wenn `map`, `locations` oder `onLocationUpdate` sich ändern
+  
 
   function parsePoint(position) {
     const [longitude, latitude] = position.slice(6, -1).split(" ");
diff --git a/store/mapLayersState.js b/store/mapLayersState.js
index 06a599e29..de2e792a6 100644
--- a/store/mapLayersState.js
+++ b/store/mapLayersState.js
@@ -6,19 +6,19 @@ export const mapLayersState = atom({
   default: {
     // Standardwerte für jeden Layer
     TALAS: true,
-    ECI: false,
-    ULAF: false,
-    GSMModem: false,
-    CiscoRouter: false,
-    WAGO: false,
-    Siemens: false,
-    OTDR: false,
-    WDM: false,
-    GMA: false,
-    Messstellen: false,
-    TALASICL: false,
-    DAUZ: false,
-    SMSFunkmodem: false,
-    Sonstige: false,
+    ECI: true,
+    ULAF: true,
+    GSMModem: true,
+    CiscoRouter: true,
+    WAGO: true,
+    Siemens: true,
+    OTDR: true,
+    WDM: true,
+    GMA: true,
+    Messstellen: true,
+    TALASICL: true,
+    DAUZ: true,
+    SMSFunkmodem: true,
+    Sonstige: true,
   },
 });