poiTypState.js Recoil-Atom erstellt für jetzt und besonders für Zukünftige Skalierbarkeit

components/MapComponent.js

@@ -15,6 +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';
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
   const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
@@ -197,10 +198,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
   //------------------------------------------
 
-  const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png"; // ich habe kein mapTiles lokal
-  const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-  //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png"; // auf dem Server local
-  //const onlineTileLayer = "TileMap/mapTiles/{z}/{x}/{y}.png";
+  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";
   // Create map layers
   const TALAS = new L.layerGroup();
   const ECI = new L.layerGroup();
@@ -288,14 +288,15 @@ 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(() => {
@@ -390,7 +391,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     const popupContent = L.DomUtil.create("div");
     popupContent.innerHTML = `
   <form id="addStationForm" class="m-0 p-2 w-full">
-      
+      <!-- Kommantar von hier
         <div class="flex items-center mb-4">
 
         <label for="idPoi" class="block mr-2 flex-none">ID Poi:</label>
@@ -412,7 +413,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
       />
       </div>
-     
+      Kommantar bis hier-->
   <div class="flex items-center mb-4">      
     <label for="name" class="block mr-2 flex-none">Name:</label>
     <input
@@ -518,7 +519,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);
   }
@@ -1508,20 +1509,24 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     }
   }, [map, zoomTrigger]);
   //------------------------------------------
-  // Funktion zum Abrufen der poiTyp Daten
-  const fetchPoiTyp = async () => {
-    try {
-      const response = await fetch("/api/poiTyp");
-      const data = await response.json();
-      console.log("Fetched poiTyp:", data);
-    } catch (error) {
-      console.error("Error fetching poiTyp data:", error);
-    }
-  };
+    // Funktion zum Abrufen der poiTyp Daten
+    const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); // Recoil State verwenden
 
-  useEffect(() => {
-    fetchPoiTyp(); // Rufen Sie diese Funktion beim Laden der Komponente auf
-  }, []);
+    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();
+    }, []);
+    
 
   //----------------------------------------------------
 

store/poiTypState.js

@@ -0,0 +1,7 @@
+// store/poiTypState.js
+import { atom } from 'recoil';
+
+export const poiTypState = atom({
+  key: 'poiTypState', // eindeutiger Schlüssel
+  default: [], // Initialer Standardwert, leeres Array
+});