Fix: Ensure proper map object is passed to ShowAddStationPopup

The ShowAddStationPopup component was failing to close popups because it was using an uninitialized 'map' object. This commit changes the reference from 'map' to 'initMap' at the point where ShowAddStationPopup is rendered. This ensures that the correct map instance is being used, resolving the TypeError related to undefined properties when attempting to close the popup.

This change is critical for maintaining the functionality of our map interactions, particularly in scenarios where dynamic components are rendered based on user actions.

components/MapComponent.js

@@ -415,7 +415,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     // Create a root container for the React component inside the popup
     const root = ReactDOM.createRoot(container);
 
-    root.render(<ShowAddStationPopup map={map} latlng={e.latlng} />);
+    root.render(<ShowAddStationPopup map={initMap} latlng={e.latlng} />);
 
     // Create and configure the popup
     L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap);

components/ShowAddStationPopup.js

@@ -16,7 +16,10 @@ const ShowAddStationPopup = ({ map, latlng }) => {
         setPoiTypData2(data);
         if (data && data.length > 0) {
           setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
-          console.log("Initial poiTypeId set in ShowAddStationPopup.js :", data[0].idPoiTyp);
+          console.log(
+            "Initial poiTypeId set in ShowAddStationPopup.js :",
+            data[0].idPoiTyp
+          );
         }
       } catch (error) {
         console.error("Fehler beim Abrufen der poiTyp Daten:", error);
@@ -28,24 +31,28 @@ const ShowAddStationPopup = ({ map, latlng }) => {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    const formData = { 
+    const formData = {
       name, // Name der Station
       poiTypeId, // Typ der Station, logged as idPoiTyp
       latitude, // Breitengrad
       longitude, // Längengrad
-     };
+    };
 
-    fetch('/api/addLocation', {
+    fetch("/api/addLocation", {
-      method: 'POST',
+      method: "POST",
-      headers: { 'Content-Type': 'application/json' },
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify(formData),
     })
-    .then((response) => response.json())
+      .then((response) => response.json())
-    .then((data) => console.log(data)) // Handle the response data
+      .then((data) => console.log(data)) // Handle the response data
-    .catch((error) => console.error(error)); // Handle any errors
+      .catch((error) => console.error(error)); // Handle any errors
 
-    // Close the popup
+    // Check if map is not undefined and call closePopup
-    //map.closePopup();
+    if (map && typeof map.closePopup === "function") {
+      map.closePopup();
+    } else {
+      console.error("Map object is undefined or closePopup is not a function");
+    }
   };
 
   return (
@@ -75,7 +82,8 @@ const ShowAddStationPopup = ({ map, latlng }) => {
           onChange={(e) => setPoiTypeId(e.target.value)}
           className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
         >
-          {poiTypData2 && poiTypData2.map((poiTyp, index) => (
+          {poiTypData2 &&
+            poiTypData2.map((poiTyp, index) => (
               <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
                 {poiTyp.name}
               </option>

config/config.js

@@ -23,17 +23,17 @@ if (typeof window !== "undefined") {
   user = url.searchParams.get("u") || "484"; // Ein weiterer Parameter aus der URL, Standardwert ist '484 admin zu testen von Stationen ausblenden und einblenden in der Card'
 
   // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
-/*   mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; //idMap: 10, idUser: 484
+  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; //idMap: 10, idUser: 484
   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`; */
 }
 
 // Export der definierten Variablen und URLs, damit sie in anderen Teilen der Anwendung verwendet werden können

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

@@ -2,8 +2,8 @@
 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.187: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