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.
This commit is contained in:
ISA
2024-05-03 07:20:51 +02:00
parent 5986de04dd
commit fb25f3a39d
4 changed files with 27 additions and 19 deletions

View File

@@ -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', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
fetch("/api/addLocation", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
})
.then((response) => response.json())
.then((data) => console.log(data)) // Handle the response data
.catch((error) => console.error(error)); // Handle any errors
.then((response) => response.json())
.then((data) => console.log(data)) // Handle the response data
.catch((error) => console.error(error)); // Handle any errors
// Close the popup
//map.closePopup();
// Check if map is not undefined and call 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>