GisStationsStaticDistrict API Datenaufruf in der Console

.next/server/pages-manifest.json

@@ -3,6 +3,6 @@
   "/_error": "pages/_error.js",
   "/_document": "pages/_document.js",
   "/": "pages/index.js",
-  "/api/locations": "pages/api/locations.js",
-  "/api/[...path]": "pages/api/[...path].js"
+  "/api/[...path]": "pages/api/[...path].js",
+  "/api/locations": "pages/api/locations.js"
 }

.next/static/chunks/webpack.js

@@ -153,7 +153,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "0f945be9853e1317"; }
+/******/ 		__webpack_require__.h = function() { return "60f0eb37bd675352"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

components/MapComponent.js

@@ -4,52 +4,61 @@ import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
 import "leaflet-contextmenu";
-import * as config from '../config/config.js';
+import * as config from "../config/config.js";
 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 [dataStatic, setDataStatic] = useState([]); // Zustand für statische Daten
+  const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useState(
+    []
+  ); // Zustand für statische Daten
   const [dataStatus, setDataStatus] = useState([]); // Zustand für Statusdaten
   const [dataIcons, setDataIcons] = useState([]); // Zustand für Icons
   const [dataSystem, setDataSystem] = useState([]); // Zustand für Systemdaten
 
   // Konstanten für die URLs
-    const mapDataStaticUrl = config.mapDataStaticUrl;
+  const mapGisStationsStaticDistrictUrl =
+    config.mapGisStationsStaticDistrictUrl;
   const mapDataStatusUrl = config.mapDataStatusUrl;
   const mapDataIconUrl = config.mapDataIconUrl;
   const mapDataSystemUrl = config.mapDataSystemUrl;
 
-    console.log('dataStatic hier :', dataStatic);
-    console.log('map:', map);
+  console.log("GisStationsStaticDistrict 1 :", GisStationsStaticDistrict);
+  console.log("map:", map);
   //------------------------------------------
+  // API-Daten laden für GisStationsStaticDistrict
+  //http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
   useEffect(() => {
     const fetchData = async () => {
       try {
         console.log("Datenabruf gestartet...");
-          const response = await fetch(config.mapDataStaticUrl);
+        const response = await fetch(config.mapGisStationsStaticDistrictUrl);
         const jsonResponse = await response.json();
 
         // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
-          if (jsonResponse && jsonResponse.length > 0 && jsonResponse[0].points) {
-            console.log('dataStatic hier :', dataStatic);
-            console.log('map:', map);
-            setDataStatic(jsonResponse[0].points); // Zugriff auf das erste Objekt und dessen points-Array
+        if (jsonResponse && jsonResponse.Points) {
+          console.log(
+            "GisStationsStaticDistrict geladen:",
+            jsonResponse.Points
+          );
+          setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
         } else {
-            console.error('Erwartete Daten im "points"-Array nicht gefunden', jsonResponse);
-            setDataStatic([]);
+          console.error(
+            'Erwartete Daten im "Points"-Array nicht gefunden',
+            jsonResponse
+          );
+          setGisStationsStaticDistrict([]);
         }
       } catch (error) {
         console.error("Fehler beim Laden der Daten: ", error);
-          setDataStatic([]);
+        setGisStationsStaticDistrict([]);
       }
     };
 
     fetchData();
   }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
 
-        
-//------------------------------------------
+  //------------------------------------------
   useEffect(() => {
     // Prüfen der Internetverbindung beim Start
     console.log("Prüfen der Internetverbindung...");
@@ -60,43 +69,27 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       try {
         console.log("Datenabruf gestartet...");
         const responses = await Promise.all([
-            fetch(config.mapDataStaticUrl).then(res => res.json()),
-            fetch(config.mapDataStatusUrl).then(res => res.json()),
-            fetch(config.mapDataIconUrl).then(res => res.json()),
-            fetch(config.mapDataSystemUrl).then(res => res.json())
+          fetch(config.mapGisStationsStaticDistrictUrl).then((res) =>
+            res.json()
+          ),
+          fetch(config.mapDataStatusUrl).then((res) => res.json()),
+          fetch(config.mapDataIconUrl).then((res) => res.json()),
+          fetch(config.mapDataSystemUrl).then((res) => res.json()),
         ]);
         console.log("Daten erfolgreich geladen.");
-          setDataStatic(responses[0].Points);
+        setGisStationsStaticDistrict(responses[0].Points);
         setDataStatus(responses[1].Statis);
         setDataIcons(responses[2].List);
-          setDataSystem(responses[3].Systems.filter(system => system.Allow === 1));
+        setDataSystem(
+          responses[3].Systems.filter((system) => system.Allow === 1)
+        );
       } catch (error) {
         console.error("Fehler beim Laden der Daten: ", error);
       }
     };
 
     fetchData();
-    }, []);// Leeres Abhängigkeitsarray, um nur beim ersten Mount zu laden
-
-    useEffect(() => {
-      if (map && Array.isArray(dataStatic)) {
-        dataStatic.forEach(item => {
-          const marker = L.marker([item.y, item.x], {  // Verwendung von item.y und item.x statt item.latitude und item.longitude
-            icon: L.icon({
-              iconUrl: '/path/to/icon.png',  // Pfad zum Icon
-              iconSize: [25, 41],            // Größe des Icons
-              iconAnchor: [12, 41],          // Ankerpunkt des Icons
-              popupAnchor: [1, -34],         // Position des Popups relativ zum Icon
-              shadowSize: [41, 41]           // Größe des Schattens
-            })
-          }).addTo(map);
-    
-          // Anpassen des Popups um relevante Daten anzuzeigen
-          marker.bindPopup(`<b>${item.lD_Name}</b><br>${item.device}`).openPopup();
-        });
-      }
-    }, [map, dataStatic]); // Abhängigkeiten des Effekts
-    
+  }, []); // Leeres Abhängigkeitsarray, um nur beim ersten Mount zu laden
 
   const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
   const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
@@ -121,7 +114,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     if (typeof window !== "undefined") {
       console.log("Window height from config:", config.windowHeight);
     }
-}, []);
+  }, []);
 
   // Funktionen zur Überwachung der Internetverbindung
   const checkInternet = () => {
@@ -136,7 +129,20 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       initialMap = L.map(mapRef.current, {
         center: [53.111111, 8.4625],
         zoom: 10,
-        layers: [TALAS, ECI, ULAF, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, Sonstige, TALASICL],
+        layers: [
+          TALAS,
+          ECI,
+          ULAF,
+          GSMModem,
+          CiscoRouter,
+          WAGO,
+          Siemens,
+          OTDR,
+          WDM,
+          GMA,
+          Sonstige,
+          TALASICL,
+        ],
         zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
         contextmenu: true,
         contextmenuItems: [
@@ -453,8 +459,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     var y = 7.739617925303934;
     var zoom = 7;
 
-    /*  for (var i = 0; i < dataStaticlength; i++) {
-      var gisStatics = dataStatic[i];
+    /*  for (var i = 0; i < GisStationsStaticDistrictlength; i++) {
+      var gisStatics = GisStationsStaticDistrict[i];
       if (stationValue === gisStatics.Area_Name) {
         //console.log(gisStatics.X+","+gisStatics.Y);
         x = gisStatics.X;

config/config.js

@@ -7,7 +7,7 @@ const serverURL = "/api"; // Die Basis-URL des Servers, von dem Daten bezogen we
 
 // Initialisieren von Variablen, die später im Browserkontext gesetzt werden
 let windowHeight, url_string, url, c, user;
-let mapDataStaticUrl,
+let mapGisStationsStaticDistrictUrl,
   mapDataStatusUrl,
   mapDataMeasures,
   mapDataIconUrl,
@@ -25,16 +25,16 @@ if (typeof window !== "undefined") {
   url_string = window.location.href; // Die vollständige URL als String
   url = new URL(url_string); // Die URL als URL-Objekt, um Teile der URL einfacher zu handhaben
   c = url.searchParams.get("m") || "10"; // Ein Parameter aus der URL, Standardwert ist '10'
-  user = url.searchParams.get("u") || "484"; // Ein weiterer Parameter aus der URL, Standardwert ist '487 oder 484'
+  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
-  mapDataStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
+  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
   mapDataStatusUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`;
   mapDataMeasures = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`;
   mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
   mapDataSystemUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
 
-  /*   mapDataStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
+  /*   mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
   mapDataStatusUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
   mapDataMeasures = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
   mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
@@ -59,7 +59,7 @@ export {
   url,
   c,
   user,
-  mapDataStaticUrl,
+  mapGisStationsStaticDistrictUrl,
   mapDataStatusUrl,
   mapDataMeasures,
   mapDataIconUrl,