zoomIn, zoomOut and centerHere, fixed the variable assignment to ensure the code functions correctly.

components/DataSheet.js

@@ -1,6 +1,12 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useRecoilValue } from 'recoil';
+import { gisStationsStaticDistrictState } from '../features/gisStationState';
 
 function DataSheet() {
+  const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
+  useEffect(() => {
+    console.log('GisStationsStaticDistrict in DataSheet:', GisStationsStaticDistrict);
+  }, [GisStationsStaticDistrict]);
   const stationListing = [
     { id: 1, name: "Ammersricht BZR (FGN)" },
     { id: 2, name: "Bad-Bentheim" },

components/MapComponent.js

@@ -206,7 +206,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   const Sonstige = new L.layerGroup();
   const TALASICL = new L.layerGroup();
 
-  let initialMap = [];
+  let newMap = [];
 
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -223,7 +223,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   // Initialisierung der karte und hinzuügen der Layers
   useEffect(() => {
     if (mapRef.current && !map) {
-      const newMap = L.map(mapRef.current, {
+      newMap = L.map(mapRef.current, {
         center: [53.111111, 8.4625],
         zoom: 8,
         layers: [
@@ -370,14 +370,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   };
 
   const zoomIn = (e) => {
-    initialMap.flyTo(e.latlng, 12);
+    newMap.flyTo(e.latlng, 12);
   };
 
   const zoomOut = (e) => {
     fly();
   };
   const centerHere = (e) => {
-    initialMap.panTo(e.latlng);
+    newMap.panTo(e.latlng);
   };
 
   const showCoordinates = (e) => {
@@ -513,7 +513,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     var y = 7.739617925303934;
     var zoom = 7;
 
-    initialMap.flyTo([x, y], zoom);
+    newMap.flyTo([x, y], zoom);
   }
 
   function getIconPath(status, iconNumber, marker) {

config/config.js

@@ -31,17 +31,17 @@ if (typeof window !== "undefined") {
   user = url.searchParams.get("u") || "485"; // Ein weiterer Parameter aus der URL, Standardwert ist '487 oder 484 oder 485'
 
   // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
-  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
+  /* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
   mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`;
   mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`;
   mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
-  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
+  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
 
-  /* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
+  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
   mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
   mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
   mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`;
-  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
+  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
 
   // URLs zu Offline-Daten, falls benötigt
 }

features/gisStationState.js

@@ -0,0 +1,7 @@
+// Pfad: features/gisStationState.js
+import { atom } from 'recoil';
+
+export const gisStationsStaticDistrictState = atom({
+  key: 'gisStationsStaticDistrict', // Eindeutiger Schlüssel (innerhalb des Projekts)
+  default: [], // Standardwert (Anfangszustand)
+});

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "wwwrootTalas5NodeMap4",
+  "name": "OpenStreetMapProject 19.04.2024",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -14,7 +14,8 @@
         "overlapping-marker-spiderfier-leaflet": "^0.2.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-leaflet": "^4.2.1"
+        "react-leaflet": "^4.2.1",
+        "recoil": "^0.7.7"
       },
       "devDependencies": {
         "autoprefixer": "^10.4.19",
@@ -845,6 +846,11 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "node_modules/hamt_plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+      "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -1595,6 +1601,25 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recoil": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
+      "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
+      "dependencies": {
+        "hamt_plus": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",

package.json

@@ -9,7 +9,8 @@
     "overlapping-marker-spiderfier-leaflet": "^0.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-leaflet": "^4.2.1"
+    "react-leaflet": "^4.2.1",
+    "recoil": "^0.7.7"
   },
   "scripts": {
     "dev": "next dev",

pages/_app.js

@@ -1,33 +1,13 @@
-import "../styles/global.css"; // Pfad zur globalen CSS-Datei anpassen
+// Pfad: pages/_app.js
-import Script from "next/script";
+import { RecoilRoot } from 'recoil';
-
+import "../styles/global.css";
-import React from "react";
-
-export default function MyApp({ Component, pageProps }) {
-  return (
-    <>
-      <Script
-        src="/js/OverlappingMarkerSpiderfier.js"
-        strategy="beforeInteractive"
-      />
-      <Component {...pageProps} />
-    </>
-  );
-}
-
-// Bibliotheken, die in der _app.js-Datei importiert werden, werden auf jeder Seite geladen.
-/* import Script from 'next/script';
 
 function MyApp({ Component, pageProps }) {
   return (
-    <>
+    <RecoilRoot>
-      <Script 
-        src="/js/OverlappingMarkerSpiderfier.js" 
-        strategy="beforeInteractive"
-      />
       <Component {...pageProps} />
-    </>
+    </RecoilRoot>
   );
 }
 
-export default MyApp; */
+export default MyApp;

pages/api/[...path].js

@@ -2,11 +2,16 @@
 import { createProxyMiddleware } from "http-proxy-middleware";
 
 export default createProxyMiddleware({
-  target: "http://10.10.0.13", // Ziel-URL des Proxys
+  //target: "http://10.10.0.13", // Ziel-URL des Proxys
-  //target: "http://192.168.10.52:3000", // Ziel-URL des Proxys
+  target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
   changeOrigin: true,
   pathRewrite: {
     "^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert
   },
   logLevel: "debug", // Setzt das Logging-Level auf "debug" für detaillierte Ausgaben
 });
+//Febunacci code javascript
+
+
+
+