From c4e70564ec84ba5f53537cfb37b1f0b27744ca98 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 2 May 2024 07:16:36 +0200
Subject: [PATCH] =?UTF-8?q?Um=20sicherzustellen,=20dass=20Sie=20die=20aktu?=
 =?UTF-8?q?alisierten=20Werte=20von=20poiTypData=20sehen=20k=C3=B6nnen,=20?=
 =?UTF-8?q?sobald=20sie=20gesetzt=20sind,=20k=C3=B6nnen=20Sie=20eine=20sep?=
 =?UTF-8?q?arate=20useEffect=20verwenden,=20die=20auf=20=C3=84nderungen=20?=
 =?UTF-8?q?von=20poiTypData=20reagiert.=20Dies=20erm=C3=B6glicht=20es=20Ih?=
 =?UTF-8?q?nen,=20immer=20die=20neuesten=20Werte=20in=20der=20Konsole=20zu?=
 =?UTF-8?q?=20sehen,=20unabh=C3=A4ngig=20davon,=20wann=20die=20Daten=20abg?=
 =?UTF-8?q?erufen=20und=20gesetzt=20werden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MapComponent.js | 62 ++++++++++++++++++++------------------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 64cafce7d..eede305c8 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -15,7 +15,7 @@ import { gisSystemStaticState } from "../store/gisSystemState";
 import { mapLayersState } from "../store/mapLayersState";
 import { selectedAreaState } from "../store/selectedAreaState";
 import { zoomTriggerState } from "../store/zoomTriggerState";
-import { poiTypState } from '../store/poiTypState';
+import { poiTypState } from "../store/poiTypState";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
   const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
@@ -199,8 +199,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   //------------------------------------------
 
   const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
-  //const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-  const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
+  const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+  //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
   // Create map layers
   const TALAS = new L.layerGroup();
   const ECI = new L.layerGroup();
@@ -288,15 +288,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       setMap(initMap);
       setOms(oms);
 
-      initMap.on('zoomend', function() {
-      // Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
-      if (initMap.getZoom() > 15) {
-        initMap.setZoom(15);
-      } else if (initMap.getZoom() < 5) {
-        initMap.setZoom(5);
-      }
-    });
-    
+      initMap.on("zoomend", function () {
+        // Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
+        if (initMap.getZoom() > 15) {
+          initMap.setZoom(15);
+        } else if (initMap.getZoom() < 5) {
+          initMap.setZoom(5);
+        }
+      });
 
       // Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen.
       initMap.whenReady(() => {
@@ -519,7 +518,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   function fly(stationValue) {
     var x = 51.41321407879154;
     var y = 7.739617925303934;
-    var zoom = 7
+    var zoom = 7;
 
     initMap.flyTo([x, y], zoom);
   }
@@ -1509,24 +1508,27 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     }
   }, [map, zoomTrigger]);
   //------------------------------------------
-    // Funktion zum Abrufen der poiTyp Daten
-    const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); // Recoil State verwenden
+  // Funktion zum Abrufen der poiTyp Daten
+  const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); // Recoil State verwenden
 
-    useEffect(() => {
-      const fetchPoiTypData = async () => {
-        try {
-          const response = await fetch('/api/poiTyp');
-          const data = await response.json();
-          setPoiTypData(data); // Daten im Recoil State speichern
-          console.log('Fetched poiTyp Data:', data); // Daten in der Konsole anzeigen
-        } catch (error) {
-          console.error('Fehler beim Abrufen der poiTyp Daten:', error);
-        }
-      };
-    
-      fetchPoiTypData();
-    }, []);
-    
+  useEffect(() => {
+    const fetchPoiTypData = async () => {
+      try {
+        const response = await fetch("/api/poiTyp");
+        const data = await response.json();
+        setPoiTypData(data); // Daten im Recoil State speichern
+      } catch (error) {
+        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
+      }
+    };
+
+    fetchPoiTypData();
+  }, []);
+
+  // Effekt zum Loggen der poiTypData, wenn sie sich ändern
+  useEffect(() => {
+    console.log("poiTypData aktualisiert:", poiTypData);
+  }, [poiTypData]);
 
   //----------------------------------------------------