diff --git a/components/MapComponent.js b/components/MapComponent.js
index 4112ccf6b..00e1ee262 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -18,13 +18,17 @@ import { selectedAreaState } from "../store/atoms/selectedAreaState.js";
import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js";
import { poiTypState } from "../store/atoms/poiTypState.js";
import ShowAddStationPopup from "./ShowAddStationPopup";
-import { poiReadFromDbTriggerAtom } from '../store/atoms/poiReadFromDbTriggerAtom';
+import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
//import { createRoot } from "react-dom/client";
const MapComponent = ({ locations, onLocationUpdate }) => {
-
+ const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
+ const [poiTypMap, setPoiTypMap] = useState(new Map());
const [showPopup, setShowPopup] = useState(false);
- const [popupCoordinates, setPopupCoordinates] = useState({ lat: 52.52, lng: 13.4050 }); // Beispielkoordinaten
+ const [popupCoordinates, setPopupCoordinates] = useState({
+ lat: 52.52,
+ lng: 13.405,
+ }); // Beispielkoordinaten
const openPopup = () => setShowPopup(true);
const closePopup = () => setShowPopup(false);
@@ -39,7 +43,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
setShowPopup(true);
};
-
const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
const [poiTypData, setPoiTypData] = useState(poiTypState); // Recoil State verwenden
const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
@@ -277,7 +280,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
zoomControl: false,
contextmenu: true,
contextmenuItems: [
- { text: "Station hinzufügen", callback: addStationCallback },
+ { text: "Station hinzufügen", callback: addStationCallback },
{
text: "Station öffnen (Tab)",
icon: "img/screen_new.png",
@@ -347,6 +350,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}
}
//----------------------------------
+ // poiTyp Daten hinzufügen
//------------------------------------------
// Funktion zum Abrufen der poiTyp Daten
@@ -360,7 +364,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
}
};
- console.log("trigger in MapComponent.js in fetchPoiTypData:", poiReadTrigger);
+ console.log(
+ "trigger in MapComponent.js in fetchPoiTypData:",
+ poiReadTrigger
+ );
fetchPoiTypData();
}, []);
@@ -429,14 +436,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
loadData();
};
- // Kontextmenü Callback für "Station hinzufügen"
- const addStationCallback = (event) => {
- setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
- setShowPopup(true); // Popup öffnen
- };
+ // Kontextmenü Callback für "Station hinzufügen"
+ const addStationCallback = (event) => {
+ setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
+ setShowPopup(true); // Popup öffnen
+ };
//-----Kontextmenu----ende------------
// Ensure this function is only called when map is initialized and available
-/* const showAddStationPopup = (e, map) => {
+ /* const showAddStationPopup = (e, map) => {
const container = L.DomUtil.create("div");
// Create a root container for the React component inside the popup
@@ -458,7 +465,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}; */
// Inside your ShowAddStationPopup component
-/* useEffect(() => {
+ /* useEffect(() => {
// Cleanup function to unmount React component
return () => {
if (container._reactRoot) {
@@ -470,7 +477,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
//------------------------------------------
// Hinzufügen eines neuen Standorts (Marker) in MySQL-DB-Tabelle (poi)
-/* async function handleSubmit(event) {
+ /* async function handleSubmit(event) {
event.preventDefault();
const form = event.target;
@@ -545,7 +552,27 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
return path;
}
+ //------------------------------------------
+ // Funktion, um die name und idPoiTyp von `poiTyp` MySQL DB Tabelle in einer Map zu speichern
+ useEffect(() => {
+ const fetchPoiTypData = async () => {
+ try {
+ const response = await fetch("/api/readPoiTyp");
+ const data = await response.json();
+ const map = new Map();
+ data.forEach((item) => map.set(item.idPoiTyp, item.name));
+ setPoiTypMap(map);
+ setIsPoiTypLoaded(true); // Daten wurden erfolgreich geladen
+ console.log("poiTypMap:", map);
+ const poiTypName = poiTypMap.get(0) || "Unbekannt";
+ console.log("poiTypName:", poiTypName);
+ } catch (error) {
+ console.error("Fehler beim Abrufen der poiTyp-Daten:", error);
+ }
+ };
+ fetchPoiTypData();
+ }, []);
//------------------------------------------
let dbLayer = null;
useEffect(() => {
@@ -576,25 +603,27 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
map.removeLayer(poiLayerRef.current);
poiLayerRef.current = new L.LayerGroup().addTo(map);
}
- locations.forEach((location) => {
- // Fügen Sie hier die Logik hinzu, um Marker zu erstellen und zu konfigurieren
- });
+ locations.forEach((location) => {
+ // Fügen Sie hier die Logik hinzu, um Marker zu erstellen und zu konfigurieren
+ });
};
console.log("trigger in MapComponent.js:", poiReadTrigger);
- }, [map,locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert
+ }, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert
+
//------------------------------------------
- // poiLayerRef
- //--------------------------------------------
+ // poiLayerRef(poiDbLayer) POI hinzufügen
+ //--------------------------------------------
useEffect(() => {
- if (map && poiLayerRef.current) {
+ if (map && poiLayerRef.current && isPoiTypLoaded) {
// Entfernen Sie die bestehende Ebene und erstellen Sie eine neue
map.removeLayer(poiLayerRef.current);
poiLayerRef.current = new L.LayerGroup().addTo(map);
-
+
// Fügen Sie die aktualisierten Marker hinzu
locations.forEach((location) => {
const { latitude, longitude } = parsePoint(location.position);
+ const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt ";
const marker = L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: "/img/icons/green-marker-icon.png",
@@ -605,14 +634,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
draggable: true,
id: location.idPoi,
});
-
+
// Popup konfigurieren
marker.bindPopup(
- `${location.description || "Unbekannt"}
Type: ${
- location.idPoiTyp || "N/A"
- }
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
+ `${location.description || "Unbekannt"}
Type: ${poiTypName}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
);
-
+
// Event-Handler hinzufügen
marker.on("mouseover", function () {
this.openPopup();
@@ -620,7 +647,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
-
+
marker.on("dragend", (e) => {
const newLat = e.target.getLatLng().lat;
const newLng = e.target.getLatLng().lng;
@@ -630,13 +657,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
console.log("trigger in MapComponent.js:", poiReadTrigger);
});
});
-
+
marker.addTo(poiLayerRef.current);
});
}
-
- }, [map, locations, onLocationUpdate,poiReadTrigger]);
-
+ }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]);
+
//------------------------------------------
function parsePoint(position) {
@@ -1522,8 +1548,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
// Logik zur Aktualisierung der Map hier hinzufügen
// Beispiel: Daten neu laden oder aktualisieren
-
-}, [poiReadTrigger]);
+ }, [poiReadTrigger]);
//---------------------------------------------------------
return (
@@ -1572,7 +1597,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
)}
-
{
-
- const [poiTypData2, setPoiTypData2] = useState(); // Recoil State verwenden
+ const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden
const [name, setName] = useState("");
const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
+ const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string
const [latitude] = useState(latlng.lat.toFixed(5));
const [longitude] = useState(latlng.lng.toFixed(5));
const setLoadData = useSetRecoilState(readPoiMarkersStore);
const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
-
-/* useEffect(() => {
+ /* useEffect(() => {
if (map && loadData) {
console.log("Map and loadData are defined in ShowAddStationPopup.js", map);
@@ -27,15 +26,16 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
}
}, [map, loadData]); */
-// In Kontextmenü-Formular Typen anzeigen
+ // In Kontextmenü-Formular Typen anzeigen
useEffect(() => {
- const fetchPoiTypData2 = async () => {
+ const fetchpoiTypData = async () => {
try {
const response = await fetch("/api/readPoiTyp");
const data = await response.json();
- setPoiTypData2(data);
+ setpoiTypData(data);
if (data && data.length > 0) {
setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
+ setPoiTypeName(data[1].name); // Set initial poiTypeName to the name of the first poiType
console.log(
"Initial poiTypeId set in ShowAddStationPopup.js :",
data[0].idPoiTyp
@@ -46,44 +46,41 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
}
};
- fetchPoiTypData2();
+ fetchpoiTypData();
}, []);
-//-----------------handleSubmit-------------------
-const handleSubmit = async (event) => {
- event.preventDefault();
- const formData = {
+ //-----------------handleSubmit-------------------
+ const handleSubmit = async (event) => {
+ event.preventDefault();
+ const formData = {
name,
poiTypeId,
latitude,
longitude,
- };
+ };
- const response = await fetch("/api/addLocation", {
+ const response = await fetch("/api/addLocation", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
- });
+ });
- if (response.ok) {
+ if (response.ok) {
setTrigger((trigger) => {
- console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
- const newTrigger = trigger + 1;
- console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
- onClose();
- return newTrigger;
+ console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
+ const newTrigger = trigger + 1;
+ console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
+ onClose();
+ return newTrigger;
});
- } else {
+ } else {
console.error("Fehler beim Hinzufügen des POI");
- }
+ }
- if (map && typeof map.closePopup === "function") {
+ if (map && typeof map.closePopup === "function") {
map.closePopup();
- }
-};
-
-
-
+ }
+ };
return (