diff --git a/components/MapComponent.js b/components/MapComponent.js
index 618e8daae..cfefdcf9f 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -15,6 +15,7 @@ import { gisSystemStaticState } from "../store/gisSystemState";
import { mapLayersState } from "../store/mapLayersState";
const MapComponent = ({ locations, onLocationUpdate }) => {
+ const dbLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
const [map, setMap] = useState(null); // Zustand der Karteninstanz
const [oms, setOms] = useState(null); // State für OMS-Instanz
@@ -508,7 +509,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}
//useEffect zusammen von MySQL Daten bank und von APIs
- useEffect(() => {
+ /* useEffect(() => {
const fetchData = async () => {
try {
const responses = await Promise.all([
@@ -540,16 +541,30 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
};
fetchData();
- }, []);
- // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
+ }, []); */
+ //------------------------------------------
+ let dbLayer = null;
useEffect(() => {
+ if (map) {
+ // Schicht für Datenbank-Marker, sicherstellen, dass map nicht null ist
+ dbLayer = new L.LayerGroup().addTo(map);
+
+ // Fügen Sie Ihre Marker hier innerhalb dieser useEffect hinzu, da map nicht null ist
+
+ return () => {
+ // Bereinigung, entfernt dbLayer, wenn die Komponente unmountet
+ dbLayer.remove();
+ };
+ }
+ }, [map]);
+ //-------------------- // Diese useEffect wird nur beim ersten Rendering oder wenn sich `map` ändert, ausgeführt
+ // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
+ /* useEffect(() => {
// Remove old markers
if (map) {
- /* map.eachLayer((layer) => {
- if (layer instanceof L.Marker) {
- map.removeLayer(layer);
- }
- }); */
+ // Entfernen der alten DBLayer und Erstellung einer neuen
+ map.removeLayer(dbLayer);
+ dbLayer = new L.LayerGroup().addTo(map);
// Add new markers
locations.forEach((location) => {
const { latitude, longitude } = parsePoint(location.position);
@@ -579,13 +594,111 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
onLocationUpdate(markerId, newLat, newLng);
});
});
- marker.addTo(map);
+ marker.addTo(dbLayer);
});
}
}, [map, locations, onLocationUpdate]);
+ */
+ //------------------------------------------
+ // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
+ /* useEffect(() => {
+ // Remove old markers
+ if (map) {
+ map.eachLayer((layer) => {
+ if (layer instanceof L.Marker) {
+ map.removeLayer(layer);
+ }
+ });
+
+ // Add new markers
+ locations.forEach((location) => {
+ const { latitude, longitude } = parsePoint(location.position);
+ const marker = L.marker([latitude, longitude], {
+ icon: L.icon({
+ iconUrl: "/location.svg",
+ iconSize: [34, 34],
+ iconAnchor: [17, 34],
+ popupAnchor: [0, -34],
+ }),
+ draggable: true,
+ id: location.idPoi,
+ });
+
+ marker.bindPopup(
+ `${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
+ );
+ marker.bindTooltip(
+ `