33ac6e3ca5
Dieser Commit führt eine erweiterte Interaktion mit den Kartenmarkern durch die Implementierung von kontextspezifischen Menüs ein. Benutzer können nun über das Kontextmenü verschiedene Aktionen ausführen, wie das Öffnen von Marker-bezogenen Links in einem neuen Tab oder im aktuellen Fenster und das Anzeigen von Koordinaten. Details der Implementierung: - `addContextMenuToMarker` wurde hinzugefügt, um das Kontextmenü jedem Marker zuzuweisen. - Marker enthalten nun ein 'data'-Objekt für zusätzliche Informationen wie URLs, um die Funktionalität zu unterstützen. - Spezifische Callback-Funktionen wie `openInNewTab`, `openInSameWindow` und `showCoordinates` wurden definiert, um die Kontextmenüaktionen zu behandeln. - Diese Funktionen nutzen die Marker-Daten und -Position, um relevante Aktionen direkt über die Kartenoberfläche bereitzustellen. Ziel dieser Änderungen ist es, die Benutzerinteraktion mit der Karte durch schnellen Zugriff auf relevante Informationen und Funktionen zu verbessern.
1748 lines
61 KiB
JavaScript
1748 lines
61 KiB
JavaScript
// components/MapComponent.js
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
//import ReactDOM from "react-dom/client"; // Import from 'react-dom/client'
|
|
import L, { marker } 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 dynamic from "next/dynamic";
|
|
import "leaflet.smooth_marker_bouncing";
|
|
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
|
|
import DataSheet from "./DataSheet.js";
|
|
import { useRecoilState, useRecoilValue } from "recoil";
|
|
import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js";
|
|
import { gisSystemStaticState } from "../store/atoms/gisSystemState.js";
|
|
import { mapLayersState } from "../store/atoms/mapLayersState.js";
|
|
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 { createRoot } from "react-dom/client";
|
|
|
|
const plusRoundIcon = L.icon({
|
|
//iconUrl: "/img/plus_round.png", // Update with your actual path
|
|
iconUrl: "/img/plus_round.png", // Update with your actual path
|
|
iconSize: [32, 32],
|
|
iconAnchor: [35, 55],
|
|
className: "absolute top-0 left-0 z-10", // Adjust with Tailwind CSS classes
|
|
});
|
|
|
|
const MapComponent = ({ locations, onLocationUpdate }) => {
|
|
const baseUrl = "http://10.10.0.13/talas5/devices/";
|
|
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.405,
|
|
}); // Beispielkoordinaten
|
|
const openPopup = () => setShowPopup(true);
|
|
const closePopup = () => setShowPopup(false);
|
|
|
|
const handleAddStation = (stationData) => {
|
|
// Station-Daten speichern oder API-Aufruf durchführen
|
|
console.log("Neue Station:", stationData);
|
|
closePopup(); // Schließt das Popup nach dem Hinzufügen
|
|
};
|
|
// Beispiel zum Öffnen des Popups mit bestimmten Koordinaten
|
|
const openAddStationPopupWithCoordinates = (lat, lng) => {
|
|
setPopupCoordinates({ lat, lng });
|
|
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
|
|
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
|
|
const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
|
|
const [GisStationsStaticDistrict, setGisStationsStaticDistrict] =
|
|
useRecoilState(gisStationsStaticDistrictState);
|
|
const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState(
|
|
[]
|
|
); // Zustand für Statusdaten
|
|
const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
|
|
const [GisSystemStatic, setGisSystemStatic] =
|
|
useRecoilState(gisSystemStaticState); // Zustand für Systemdaten
|
|
const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten
|
|
|
|
// Konstanten für die URLs
|
|
const mapGisStationsStaticDistrictUrl =
|
|
config.mapGisStationsStaticDistrictUrl;
|
|
const mapGisStationsStatusDistrictUrl =
|
|
config.mapGisStationsStatusDistrictUrl;
|
|
const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
|
|
const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
|
|
const mapDataIconUrl = config.mapDataIconUrl;
|
|
|
|
// Funktion zum Aktualisieren der Position in der Datenbank
|
|
const updateLocationInDatabase = async (id, newLatitude, newLongitude) => {
|
|
const response = await fetch("/api/updateLocation", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
id,
|
|
latitude: newLatitude,
|
|
longitude: newLongitude,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
//schreib die neue Kooridnaten in die Console
|
|
//akuellisiere die Position in der Datenbank mit den neuen Koordinaten mit updateLocation mit SQL Anweisung UPDATE
|
|
} else {
|
|
console.error("Fehler beim Aktualisieren der Position");
|
|
}
|
|
};
|
|
|
|
// 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 {
|
|
const response = await fetch(mapGisStationsStaticDistrictUrl);
|
|
const jsonResponse = await response.json();
|
|
|
|
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
|
if (jsonResponse && jsonResponse.Points) {
|
|
setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
|
|
} else {
|
|
console.error(
|
|
'Erwartete Daten im "Points"-Array nicht gefunden',
|
|
jsonResponse
|
|
);
|
|
setGisStationsStaticDistrict([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden der Daten 1: ", error);
|
|
setGisStationsStaticDistrict([]);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
|
|
|
//GisStationsStaticDistrict Daten laden
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await fetch(mapGisStationsStaticDistrictUrl);
|
|
const jsonResponse = await response.json();
|
|
|
|
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
|
if (jsonResponse && jsonResponse.Points) {
|
|
setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
|
|
} else {
|
|
console.error(
|
|
'Erwartete Daten im "Points"-Array nicht gefunden',
|
|
jsonResponse
|
|
);
|
|
setGisStationsStaticDistrict([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden der Daten 1: ", error);
|
|
setGisStationsStaticDistrict([]);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
|
//------------------------------------------
|
|
//GisStationsStatusDistrict Daten laden
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await fetch(mapGisStationsStatusDistrictUrl);
|
|
const jsonResponse = await response.json();
|
|
|
|
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
|
if (jsonResponse && jsonResponse.Statis) {
|
|
setGisStationsStatusDistrict(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
|
|
} else {
|
|
console.error(
|
|
'Erwartete Daten im "Statis"-Array nicht gefunden',
|
|
jsonResponse
|
|
);
|
|
setGisStationsStatusDistrict([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden der Daten 2: ", error);
|
|
setGisStationsStatusDistrict([]);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
|
//------------------------------------------
|
|
//GisStationsMeasurements Daten laden
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await fetch(mapGisStationsMeasurementsUrl);
|
|
const jsonResponse = await response.json();
|
|
|
|
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
|
if (jsonResponse && jsonResponse.Statis) {
|
|
setGisStationsMeasurements(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
|
|
} else {
|
|
console.error(
|
|
'Erwartete Daten im "Statis"-Array nicht gefunden',
|
|
|
|
jsonResponse
|
|
);
|
|
setGisStationsMeasurements([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden der Daten 3: ", error);
|
|
setGisStationsMeasurements([]);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
|
//------------------------------------------
|
|
|
|
//GisSystemStatic Daten laden
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await fetch(mapGisSystemStaticUrl);
|
|
const jsonResponse = await response.json();
|
|
|
|
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
|
if (jsonResponse && jsonResponse.Systems) {
|
|
setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems'
|
|
// console.log("GisSystemStatic:", jsonResponse.Systems);
|
|
} else {
|
|
console.error(
|
|
'Erwartete Daten im "Systems"-Array nicht gefunden',
|
|
jsonResponse
|
|
);
|
|
setGisSystemStatic([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden der Daten 4: ", error);
|
|
setGisSystemStatic([]);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
|
//------------------------------------------
|
|
|
|
const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
|
|
const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
|
//const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
|
|
// Create map layers
|
|
const TALAS = new L.layerGroup();
|
|
const ECI = new L.layerGroup();
|
|
const ULAF = new L.layerGroup();
|
|
const GSMModem = new L.layerGroup();
|
|
const CiscoRouter = new L.layerGroup();
|
|
const WAGO = new L.layerGroup();
|
|
const Siemens = new L.layerGroup();
|
|
const OTDR = new L.layerGroup();
|
|
const WDM = new L.layerGroup();
|
|
const GMA = new L.layerGroup();
|
|
const Sonstige = new L.layerGroup();
|
|
const TALASICL = new L.layerGroup();
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== "undefined") {
|
|
//console.log("Window height from config:", config.windowHeight);
|
|
}
|
|
}, []);
|
|
|
|
// Funktionen zur Überwachung der Internetverbindung
|
|
const checkInternet = () => {
|
|
fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
|
|
.then((response) => setOnline(response.ok))
|
|
.catch(() => setOnline(false));
|
|
};
|
|
let initMap = [];
|
|
// Initialisierung der karte und hinzuügen der Layers
|
|
useEffect(() => {
|
|
if (mapRef.current && !map) {
|
|
initMap = L.map(mapRef.current, {
|
|
center: [53.111111, 8.4625],
|
|
zoom: 8,
|
|
layers: [
|
|
TALAS,
|
|
ECI,
|
|
ULAF,
|
|
GSMModem,
|
|
CiscoRouter,
|
|
WAGO,
|
|
Siemens,
|
|
OTDR,
|
|
WDM,
|
|
GMA,
|
|
Sonstige,
|
|
TALASICL,
|
|
],
|
|
minZoom: 5, // Minimale Zoomstufe
|
|
maxZoom: 15, // Maximale Zoomstufe
|
|
zoomControl: false,
|
|
contextmenu: true,
|
|
contextmenuItems: [
|
|
{ text: "Station hinzufügen", callback: addStationCallback },
|
|
{
|
|
text: "Station öffnen (Tab)",
|
|
icon: "img/screen_new.png",
|
|
callback: (e) => openInNewTab(e, marker),
|
|
},
|
|
{
|
|
text: "Station öffnen",
|
|
icon: "img/screen_same.png",
|
|
callback: (e) => showCoordinates(e, marker),
|
|
},
|
|
{
|
|
text: "Koordinaten",
|
|
icon: "img/screen_same.png",
|
|
callback: showCoordinates,
|
|
},
|
|
"-", // Divider
|
|
{ text: "Reinzoomen", callback: zoomIn },
|
|
{ text: "Rauszoomen", callback: zoomOut },
|
|
{ text: "Hier zentrieren", callback: centerHere },
|
|
],
|
|
});
|
|
|
|
L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
|
|
attribution:
|
|
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
}).addTo(initMap);
|
|
|
|
const overlappingMarkerSpiderfier =
|
|
new window.OverlappingMarkerSpiderfier(initMap, {
|
|
nearbyDistance: 20,
|
|
});
|
|
|
|
setMap(initMap);
|
|
setOms(overlappingMarkerSpiderfier);
|
|
|
|
initMap.on("zoomend", function () {
|
|
// Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
|
|
if (initMap.getZoom() > 15) {
|
|
initMap.setZoom(15);
|
|
} else if (initMap.getZoom() < 5) {
|
|
initMap.setZoom(5);
|
|
}
|
|
});
|
|
|
|
// Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen.
|
|
initMap.whenReady(() => {
|
|
console.log("Karte ist jetzt bereit und initialisiert.");
|
|
// Rufe hier Funktionen auf, die eine initialisierte Karte benötigen.
|
|
});
|
|
}
|
|
console.log("trigger in MapComponent.js:", poiReadTrigger);
|
|
}, [mapRef, map, poiReadTrigger]); // Prüfe die Abhängigkeiten sorgfältig
|
|
|
|
//------------------------------------------
|
|
function parsePoint(pointString) {
|
|
const match = pointString.match(
|
|
/POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/
|
|
);
|
|
if (match) {
|
|
return {
|
|
longitude: parseFloat(match[1]),
|
|
latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)?
|
|
};
|
|
} else {
|
|
// Handle the error or return a default/fallback value
|
|
console.error("Invalid POINT format:", pointString);
|
|
return null; // Oder eine sinnvolle Standardantwort
|
|
}
|
|
}
|
|
//----------------------------------
|
|
// poiTyp Daten hinzufügen
|
|
//------------------------------------------
|
|
// Funktion zum Abrufen der poiTyp Daten
|
|
|
|
useEffect(() => {
|
|
const fetchPoiTypData = async () => {
|
|
try {
|
|
const response = await fetch("/api/readPoiTyp");
|
|
const data = await response.json();
|
|
setPoiTypData(data); // Daten im Recoil State speichern
|
|
} catch (error) {
|
|
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
|
|
}
|
|
};
|
|
console.log(
|
|
"trigger in MapComponent.js in fetchPoiTypData:",
|
|
poiReadTrigger
|
|
);
|
|
fetchPoiTypData();
|
|
}, []);
|
|
|
|
// Effekt zum Loggen der poiTypData, wenn sie sich ändern
|
|
useEffect(() => {
|
|
console.log("poiTypData aktualisiert:", poiTypData);
|
|
}, [poiTypData]);
|
|
|
|
//----------------------------------------------------
|
|
//-----Kontextmenu----------------
|
|
function addContextMenuToMarker(marker) {
|
|
marker.bindContextMenu({
|
|
contextmenu: true,
|
|
contextmenuWidth: 140,
|
|
contextmenuItems: [
|
|
{ text: "Station hinzufügen", callback: addStationCallback },
|
|
{
|
|
text: "Station öffnen (Tab)",
|
|
icon: "/img/screen_new.png",
|
|
callback: (e) => openInNewTab(e, marker),
|
|
},
|
|
{
|
|
text: "Station öffnen",
|
|
icon: "/img/screen_same.png",
|
|
callback: (e) => openInSameWindow(e, marker),
|
|
},
|
|
{
|
|
text: "Koordinaten anzeigen",
|
|
icon: "/img/screen_same.png",
|
|
callback: (e) => showCoordinates(e, marker),
|
|
},
|
|
|
|
"-", // Divider
|
|
{ text: "Reinzoomen", callback: zoomIn },
|
|
{ text: "Rauszoomen", callback: zoomOut },
|
|
{ text: "Hier zentrieren", callback: centerHere },
|
|
],
|
|
});
|
|
}
|
|
// Funktion zum Öffnen in einem neuen Tab
|
|
function openInNewTab(e, marker) {
|
|
console.log("Marker data:", baseUrl + marker.options.link);
|
|
window.open(baseUrl + marker.options.link, "_blank");
|
|
}
|
|
|
|
// Funktion zum Öffnen im gleichen Fenster
|
|
function openInSameWindow(e, marker) {
|
|
console.log("Marker data:", baseUrl + marker.options.link);
|
|
window.location.href = baseUrl + marker.options.link;
|
|
}
|
|
|
|
const zoomIn = (e) => {
|
|
initMap.flyTo(e.latlng, 12);
|
|
//console.log("ZoomIn koordinaten in MapComponent", e.latlng);
|
|
};
|
|
|
|
const zoomOut = (e) => {
|
|
fly();
|
|
};
|
|
const centerHere = (e) => {
|
|
initMap.panTo(e.latlng);
|
|
};
|
|
|
|
// Funktion zum Anzeigen der Koordinaten
|
|
function showCoordinates(e, marker) {
|
|
const latLng = marker.getLatLng();
|
|
alert(
|
|
`Latitude: ${latLng.lat.toFixed(5)}, Longitude: ${latLng.lng.toFixed(5)}`
|
|
);
|
|
}
|
|
const showData = (e) => {};
|
|
const showTalas = (e) => {
|
|
map.addLayer(TALAS);
|
|
loadData();
|
|
};
|
|
const hideTalas = (e) => {
|
|
map.removeLayer(TALAS);
|
|
loadData();
|
|
};
|
|
const showGSM = (e) => {
|
|
map.addLayer(GMA);
|
|
loadData();
|
|
};
|
|
const hideGSM = (e) => {
|
|
map.removeLayer(GMA);
|
|
loadData();
|
|
};
|
|
|
|
// 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 container = L.DomUtil.create("div");
|
|
|
|
// Create a root container for the React component inside the popup
|
|
const root = ReactDOM.createRoot(container);
|
|
|
|
root.render(
|
|
|
|
<ShowAddStationPopup map={initMap} latlng={e.latlng} />
|
|
|
|
);
|
|
|
|
// Create and configure the popup
|
|
L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap);
|
|
|
|
// Cleanup when the popup is closed
|
|
initMap.on("popupclose", () => {
|
|
root.unmount(); // Use unmount method from the root
|
|
});
|
|
}; */
|
|
|
|
// Inside your ShowAddStationPopup component
|
|
/* useEffect(() => {
|
|
// Cleanup function to unmount React component
|
|
return () => {
|
|
if (container._reactRoot) {
|
|
container._reactRoot.unmount();
|
|
}
|
|
};
|
|
}, []); */
|
|
|
|
//------------------------------------------
|
|
|
|
// Hinzufügen eines neuen Standorts (Marker) in MySQL-DB-Tabelle (poi)
|
|
/* async function handleSubmit(event) {
|
|
event.preventDefault();
|
|
const form = event.target;
|
|
|
|
// Einfache Validierung, um sicherzustellen, dass idPoiTyp eine Zahl ist
|
|
if (!form.idPoiTyp.value || isNaN(form.idPoiTyp.value)) {
|
|
alert("Bitte geben Sie eine gültige ID für den Poi-Typ ein.");
|
|
return; // Beendet die Funktion, um das Senden von ungültigen Daten zu verhindern
|
|
}
|
|
|
|
const data = {
|
|
name: form.name.value,
|
|
type: form.type.value,
|
|
idPoi: form.idPoi.value,
|
|
idPoiTyp: form.idPoiTyp.value,
|
|
latitude: form.lat.value,
|
|
longitude: form.lng.value,
|
|
};
|
|
|
|
// Senden der Daten an den Server
|
|
const response = await fetch("/api/addLocation", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(data),
|
|
});
|
|
|
|
if (response.ok) {
|
|
console.log("Station erfolgreich hinzugefügt");
|
|
// Weitere Aktionen nach erfolgreichem Hinzufügen
|
|
} else {
|
|
console.error("Fehler beim Hinzufügen der Station");
|
|
// Fehlerbehandlung
|
|
}
|
|
} */
|
|
|
|
//---------------------------------------
|
|
|
|
function fly(stationValue) {
|
|
var x = 51.41321407879154;
|
|
var y = 7.739617925303934;
|
|
var zoom = 7;
|
|
|
|
initMap.flyTo([x, y], zoom);
|
|
}
|
|
|
|
function getIconPath(status, iconNumber, marker) {
|
|
let path = status
|
|
? `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png`
|
|
: `TileMap/img/icons/marker-icon-${iconNumber}.png`;
|
|
|
|
// Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen
|
|
if (
|
|
path.includes("critical") || // Priorität 1
|
|
path.includes("major") || // Priorität 2
|
|
path.includes("minor") || // Priorität 3
|
|
path.includes("system") // Priorität 4
|
|
) {
|
|
// Setze Bouncing-Optionen
|
|
marker.setBouncingOptions({
|
|
bounceHeight: 15, // Höhe des Bounces
|
|
contractHeight: 12, // Höhe des Einzugs beim Landen
|
|
bounceSpeed: 52, // Geschwindigkeit des Bounces
|
|
contractSpeed: 52, // Geschwindigkeit des Einzugs
|
|
shadowAngle: null, // Standard-Schattenwinkel
|
|
});
|
|
// Check if the icon path includes 'critical'
|
|
if (path.includes("critical")) {
|
|
// marker.bounce(3);
|
|
}
|
|
}
|
|
|
|
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(() => {
|
|
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]);
|
|
|
|
//------------------------------------------
|
|
|
|
useEffect(() => {
|
|
// Initialisierung der dbLayer, wenn die Karte verfügbar ist
|
|
if (map && !poiLayerRef.current) {
|
|
poiLayerRef.current = new L.LayerGroup().addTo(map);
|
|
}
|
|
|
|
return () => {
|
|
if (map && poiLayerRef.current) {
|
|
// Entfernen der dbLayer bei Unmount
|
|
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
|
|
});
|
|
};
|
|
console.log("trigger in MapComponent.js:", poiReadTrigger);
|
|
}, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert
|
|
|
|
//------------------------------------------
|
|
// poiLayerRef(poiDbLayer) POI hinzufügen
|
|
//--------------------------------------------
|
|
|
|
useEffect(() => {
|
|
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",
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
}),
|
|
draggable: true,
|
|
id: location.idPoi,
|
|
});
|
|
|
|
// Popup konfigurieren
|
|
marker.bindPopup(
|
|
`<b>${location.description || "Unbekannt"}</b><br>Type: ${poiTypName}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
|
|
);
|
|
|
|
// Event-Handler hinzufügen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
|
|
marker.on("dragend", (e) => {
|
|
const newLat = e.target.getLatLng().lat;
|
|
const newLng = e.target.getLatLng().lng;
|
|
const markerId = e.target.options.id;
|
|
updateLocationInDatabase(markerId, newLat, newLng).then(() => {
|
|
onLocationUpdate(markerId, newLat, newLng);
|
|
console.log("trigger in MapComponent.js:", poiReadTrigger);
|
|
});
|
|
});
|
|
|
|
marker.addTo(poiLayerRef.current);
|
|
/* //--------------
|
|
const plusMarker = L.marker([latitude, longitude], {
|
|
icon: plusRoundIcon,
|
|
zIndexOffset: 1000, // Higher z-index for visibility
|
|
});
|
|
|
|
// Add to the poiLayer
|
|
plusMarker.addTo(poiLayerRef.current);
|
|
console.log("Adding plus icon marker at", [latitude, longitude]);
|
|
//------------ */
|
|
});
|
|
}
|
|
}, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]);
|
|
|
|
//------------------------------------------
|
|
|
|
function parsePoint(position) {
|
|
const [longitude, latitude] = position.slice(6, -1).split(" ");
|
|
return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
|
|
}
|
|
//-----------------------------------------------------------------
|
|
// TALAS Marker hinzufügen
|
|
//-----------------------------------------------------------------
|
|
// Reihenfolge nach API sortiert mit der Attribute "System"
|
|
const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
|
|
const [eciVisible, setEciVisible] = useRecoilState(mapLayersState);
|
|
const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState);
|
|
const [ciscoRouterVisible, setCiscoRouterVisible] =
|
|
useRecoilState(mapLayersState);
|
|
const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState);
|
|
const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState);
|
|
const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState);
|
|
const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState);
|
|
const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState);
|
|
const [messstellenVisible, setMessstellenVisible] =
|
|
useRecoilState(mapLayersState);
|
|
const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState);
|
|
const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState);
|
|
const [smsfunkmodemVisible, setSmsfunkmodemVisible] =
|
|
useRecoilState(mapLayersState);
|
|
const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState);
|
|
const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState);
|
|
|
|
const [talasMarkers, setTalasMarkers] = useState([]); //----------------station.System === 1
|
|
const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
|
|
const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
|
|
const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
|
|
const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
|
|
const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
|
|
const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
|
|
const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
|
|
const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
|
|
const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
|
|
const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
|
|
const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
|
|
const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
|
|
const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
|
|
const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
|
|
//--------------------------------------------------------------------------------
|
|
function determinePriority(iconPath) {
|
|
if (iconPath.includes("critical")) return 1; // Highest priority
|
|
if (iconPath.includes("major")) return 2;
|
|
if (iconPath.includes("minor")) return 3;
|
|
if (iconPath.includes("system")) return 4;
|
|
return 5; // Default priority (lowest)
|
|
}
|
|
// Daten von einer externen Quelle laden
|
|
const createAndSetMarkers = async (systemId, setMarkersFunction) => {
|
|
try {
|
|
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
|
|
const jsonResponse = await response1.json();
|
|
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
|
|
const statusResponse = await response2.json();
|
|
|
|
if (jsonResponse.Points && statusResponse.Statis) {
|
|
const statisMap = new Map(
|
|
statusResponse.Statis.map((s) => [s.IdLD, s])
|
|
);
|
|
let markersData = jsonResponse.Points.filter(
|
|
(station) => station.System === systemId
|
|
).map((station) => {
|
|
const statis = statisMap.get(station.IdLD);
|
|
const iconPath = statis
|
|
? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
|
|
: `img/icons/marker-icon-${station.Icon}.png`;
|
|
|
|
const priority = determinePriority(iconPath);
|
|
const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
|
|
|
|
/* console.log(
|
|
`Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}`
|
|
); */
|
|
|
|
const marker = L.marker([station.X, station.Y], {
|
|
icon: L.icon({
|
|
iconUrl: iconPath,
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
}),
|
|
areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
|
|
link: station.Link,
|
|
zIndexOffset: zIndexOffset,
|
|
bounceOnAdd: !!statis,
|
|
});
|
|
|
|
if (statis) {
|
|
marker.on("add", () => marker.bounce(3));
|
|
}
|
|
|
|
const statusInfo = statusResponse.Statis.filter(
|
|
(status) => status.IdLD === station.IdLD
|
|
)
|
|
.reverse()
|
|
.map(
|
|
(status) => `
|
|
<div class="flex items-center my-1">
|
|
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
|
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
|
</div>
|
|
`
|
|
)
|
|
.join("");
|
|
|
|
marker.bindPopup(`
|
|
<b>${station.LD_Name}</b><br>
|
|
${station.Device}<br>
|
|
${station.Area_Short} (${station.Area_Name})
|
|
<br>
|
|
${station.Location_Short} (${station.Location_Name})
|
|
<br>
|
|
${statusInfo}
|
|
`);
|
|
return marker;
|
|
});
|
|
|
|
setMarkersFunction(markersData);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching data: ", error);
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
if (!map) return;
|
|
createAndSetMarkers(1, setTalasMarkers); // TALAS-System
|
|
createAndSetMarkers(2, setEciMarkers); // ECI-System
|
|
createAndSetMarkers(5, setGsmModemMarkers); // GSM-Modem-System
|
|
createAndSetMarkers(6, setCiscoRouterMarkers); // Cisco-Router-System
|
|
createAndSetMarkers(7, setWagoMarkers); // WAGO-System
|
|
createAndSetMarkers(8, setSiemensMarkers); // Siemens-System
|
|
createAndSetMarkers(9, setOtdrMarkers); // OTDR-System
|
|
createAndSetMarkers(10, setWdmMarkers); // WDM-System
|
|
createAndSetMarkers(11, setGmaMarkers); // GMA-System
|
|
createAndSetMarkers(13, setMessstellenMarkers); // Messstellen-System
|
|
createAndSetMarkers(100, setTalasiclMarkers); // TALASICL-System
|
|
createAndSetMarkers(110, setDauzMarkers); // DAUZ-System
|
|
createAndSetMarkers(111, setSmsfunkmodemMarkers); // SMS-Funkmodem-System
|
|
createAndSetMarkers(200, setSonstigeMarkers); // Sonstige-System
|
|
createAndSetMarkers(0, setUlafMarkers); // ULAF-System
|
|
}, [map]);
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && talasMarkers.length) {
|
|
talasMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
//console.log("Talas marker:", marker._latlng.lat, marker._latlng.lng);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
/* //--------------
|
|
const latitude = marker._latlng.lat;
|
|
const longitude = marker._latlng.lng;
|
|
const plusMarker = L.marker([latitude, longitude], {
|
|
icon: plusRoundIcon,
|
|
zIndexOffset: 1000, // Higher z-index for visibility
|
|
});
|
|
|
|
// Add to the poiLayer
|
|
plusMarker.addTo(poiLayerRef.current);
|
|
console.log("Adding plus icon marker at", [latitude, longitude]);
|
|
//------------ */
|
|
addContextMenuToMarker(marker);
|
|
});
|
|
map.addLayer(TALAS);
|
|
|
|
// Call the function here
|
|
checkOverlappingMarkers(oms, map, plusRoundIcon);
|
|
}
|
|
}, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
|
|
|
|
//console.log("talasMarkers", talasMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && eciMarkers.length) {
|
|
eciMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
map.addLayer(ECI);
|
|
}
|
|
}, [map, eciMarkers]);
|
|
|
|
//console.log("eciMarkers", eciMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && gsmModemMarkers.length) {
|
|
gsmModemMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
map.addLayer(GSMModem);
|
|
}
|
|
}, [map, gsmModemMarkers]);
|
|
|
|
//console.log("gsmModemMarkers", gsmModemMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && ciscoRouterMarkers.length) {
|
|
ciscoRouterMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
map.addLayer(CiscoRouter);
|
|
}
|
|
}, [map, ciscoRouterMarkers]);
|
|
|
|
//console.log("ciscoRouterMarkers", ciscoRouterMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && wagoMarkers.length) {
|
|
wagoMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
map.addLayer(WAGO);
|
|
|
|
//toggleLayer(mapLayersVisibility.WAGO);
|
|
}
|
|
// }, [map, wagoMarkers, mapLayersVisibility.WAGO]);
|
|
}, [map, wagoMarkers]);
|
|
//console.log("wagoMarkers", wagoMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && siemensMarkers.length) {
|
|
siemensMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
map.addLayer(Siemens);
|
|
}
|
|
}, [map, siemensMarkers]);
|
|
|
|
//console.log("siemensMarkers", siemensMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && otdrMarkers.length) {
|
|
otdrMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
map.addLayer(OTDR);
|
|
}
|
|
}, [map, otdrMarkers]);
|
|
|
|
//console.log("otdrMarkers", otdrMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && wdmMarkers.length) {
|
|
wdmMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
map.addLayer(WDM);
|
|
}
|
|
}, [map, wdmMarkers]);
|
|
|
|
//console.log("wdmMarkers", wdmMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && gmaMarkers.length) {
|
|
// Filtern des Arrays um nur "GMA" Messungen zu erhalten
|
|
const gmaMeasurements = GisStationsMeasurements.filter(
|
|
(m) => m.Gr === "GMA"
|
|
);
|
|
let area_name = "";
|
|
let measurements = {};
|
|
|
|
gmaMeasurements.forEach((m) => {
|
|
//console.log(`Messung: ${m.Area_Name}, Na: ${m.Na}, Wert: ${m.Val}`);
|
|
area_name = m.Area_Name; // Dies überschreibt area_name mit dem letzten Area_Name im Array
|
|
measurements[m.Na] = m.Val; // Speichert den Wert von Val unter dem Code Na in einem Objekt
|
|
});
|
|
|
|
// Zugriff auf die Werte über die Codes
|
|
let measurementLT = measurements["LT"];
|
|
let measurementFTP = measurements["FTP"];
|
|
let measurementGT = measurements["GT"];
|
|
let measurementRLF = measurements["RLF"];
|
|
|
|
/* console.log(
|
|
"area_name",
|
|
area_name,
|
|
"------measurementLT",
|
|
measurements.LT,
|
|
"-------measurementFBT",
|
|
measurements.FBT,
|
|
"------measurementGT",
|
|
measurements.GT,
|
|
"------measurementRLF",
|
|
measurements.RLF
|
|
);
|
|
console.log("measurements", measurements); */
|
|
gmaMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Tooltip beim Überfahren mit der Maus anzeigen
|
|
marker.bindTooltip(
|
|
`
|
|
<div class="p-0 rounded-lg bg-white bg-opacity-90">
|
|
<div class="font-bold text-sm text-black">
|
|
<span>${area_name}</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-blue-700">
|
|
<span>LT : ${measurements.LT} °C</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-red-700">
|
|
<span>FBT : ${measurements.FBT} °C</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-yellow-500">
|
|
<span>GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}</span>
|
|
</div>
|
|
<div class="font-bold text-xxs text-green-700">
|
|
<span>RLF : ${measurements.RLF} %</span>
|
|
</div>
|
|
</div>
|
|
`,
|
|
{
|
|
permanent: true, // Tooltip wird ständig angezeigt
|
|
direction: "auto", // Automatische Ausrichtung
|
|
offset: [20, 0], // Offset-Werte
|
|
}
|
|
);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
map.addLayer(GMA);
|
|
}
|
|
}, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `gmaMarkers` beschränken
|
|
|
|
//console.log("gmaMarkers", gmaMarkers);
|
|
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && messstellenMarkers.length) {
|
|
messstellenMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
map.addLayer(GMA);
|
|
}
|
|
}, [map, messstellenMarkers]);
|
|
|
|
//console.log("messstellenMarkers", messstellenMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && talasiclMarkers.length) {
|
|
talasiclMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
map.addLayer(TALASICL);
|
|
}
|
|
}, [map, talasiclMarkers]);
|
|
|
|
//console.log("talasiclMarkers", talasiclMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && dauzMarkers.length) {
|
|
dauzMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
}
|
|
}, [map, dauzMarkers]);
|
|
|
|
//console.log("dauzMarkers", dauzMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && smsfunkmodemMarkers.length) {
|
|
smsfunkmodemMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
}
|
|
}, [map, smsfunkmodemMarkers]);
|
|
|
|
//console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && ulafMarkers.length) {
|
|
ulafMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
}
|
|
}, [map, ulafMarkers]);
|
|
|
|
//console.log("ulafMarkers", ulafMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map && sonstigeMarkers.length) {
|
|
sonstigeMarkers.forEach((marker) => {
|
|
marker.addTo(map);
|
|
oms.addMarker(marker);
|
|
|
|
// Popup beim Überfahren mit der Maus öffnen und schließen
|
|
marker.on("mouseover", function () {
|
|
this.openPopup();
|
|
});
|
|
marker.on("mouseout", function () {
|
|
this.closePopup();
|
|
});
|
|
});
|
|
}
|
|
}, [map, sonstigeMarkers]);
|
|
|
|
//console.log("sonstige", sonstigeMarkers);
|
|
//-------------------------------------------
|
|
//--------------------------------------------------------------------------------
|
|
|
|
const mapLayersVisibility = useRecoilValue(mapLayersState);
|
|
|
|
/* useEffect(() => {
|
|
if (!map || !talasMarkers) return;
|
|
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
|
|
// Apply visibility state to the TALAS layer
|
|
toggleLayer(mapLayersVisibility.TALAS);
|
|
}, [map, talasMarkers, mapLayersVisibility.TALAS]); */ // Depend on map, markers array, and visibility state
|
|
|
|
const handleCheckboxChange = (name, event) => {
|
|
const { checked } = event.target;
|
|
const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen
|
|
|
|
setMapLayersVisibility((prev) => {
|
|
return {
|
|
...prev,
|
|
[internalName]: checked,
|
|
};
|
|
});
|
|
};
|
|
|
|
//------------------------------------------
|
|
|
|
// Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS
|
|
|
|
useEffect(() => {
|
|
if (!map || !talasMarkers) return;
|
|
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
|
|
// Apply visibility state to the TALAS layer
|
|
toggleLayer(mapLayersVisibility.TALAS);
|
|
}, [map, talasMarkers, mapLayersVisibility.TALAS]);
|
|
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der ECI-Marker basierend auf dem Zustand von mapLayersVisibility.ECI
|
|
|
|
useEffect(() => {
|
|
if (!map || !eciMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
eciMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
eciMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility state to the ECI layer
|
|
toggleLayer(mapLayersVisibility.ECI);
|
|
}, [map, eciMarkers, mapLayersVisibility.ECI]);
|
|
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der ULAF-Marker basierend auf dem Zustand von mapLayersVisibility.ULAF
|
|
|
|
useEffect(() => {
|
|
if (!map || !ulafMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
ulafMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
ulafMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.ULAF);
|
|
}, [map, ulafMarkers, mapLayersVisibility.ULAF]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der GSMModem-Marker basierend auf dem Zustand von mapLayersVisibility.GSMModem
|
|
|
|
useEffect(() => {
|
|
if (!map || !gsmModemMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
gsmModemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
gsmModemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.GSMModem);
|
|
}, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]);
|
|
|
|
//------------------------------------------ */
|
|
const layerNames = {
|
|
"GSM Modem": "GSMMODEM",
|
|
"Cisco Router": "CiscoRouter",
|
|
"TALAS ICL": "TALASICL",
|
|
"SMS-Funkmodem": "GSMModem",
|
|
};
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter
|
|
|
|
useEffect(() => {
|
|
if (!map || !ciscoRouterMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
ciscoRouterMarkers.forEach((marker) => marker.addTo(map));
|
|
} else {
|
|
ciscoRouterMarkers.forEach((marker) => map.removeLayer(marker));
|
|
}
|
|
};
|
|
// Nutzt die Map, um den internen Namen zu bekommen
|
|
const internalName = layerNames["Cisco Router"] || "CiscoRouter";
|
|
toggleLayer(mapLayersVisibility[internalName]);
|
|
//console.log("internalName Cisco Router: ", internalName);
|
|
}, [map, ciscoRouterMarkers, mapLayersVisibility]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der WAGO-Marker basierend auf dem Zustand von mapLayersVisibility.WAGO
|
|
|
|
useEffect(() => {
|
|
if (!map || !wagoMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
wagoMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
wagoMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.WAGO);
|
|
}, [map, wagoMarkers, mapLayersVisibility.WAGO]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der Siemens-Marker basierend auf dem Zustand von mapLayersVisibility.Siemens
|
|
|
|
useEffect(() => {
|
|
if (!map || !siemensMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
siemensMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
siemensMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.Siemens);
|
|
}, [map, siemensMarkers, mapLayersVisibility.Siemens]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der OTDR-Marker basierend auf dem Zustand von mapLayersVisibility.OTDR
|
|
|
|
useEffect(() => {
|
|
if (!map || !otdrMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
otdrMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
otdrMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.OTDR);
|
|
}, [map, otdrMarkers, mapLayersVisibility.OTDR]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der WDM-Marker basierend auf dem Zustand von mapLayersVisibility.WDM
|
|
|
|
useEffect(() => {
|
|
if (!map || !wdmMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
wdmMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
wdmMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.WDM);
|
|
}, [map, wdmMarkers, mapLayersVisibility.WDM]);
|
|
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der GMA-Marker basierend auf dem Zustand von mapLayersVisibility.GMA
|
|
|
|
useEffect(() => {
|
|
if (!map || !gmaMarkers) return;
|
|
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
gmaMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
gmaMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.GMA);
|
|
}, [map, gmaMarkers, mapLayersVisibility.GMA]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der Sonstige-Marker basierend auf dem Zustand von mapLayersVisibility.Sonstige
|
|
|
|
useEffect(() => {
|
|
if (!map || !sonstigeMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
sonstigeMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
sonstigeMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.Sonstige);
|
|
}, [map, sonstigeMarkers, mapLayersVisibility.Sonstige]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der TALASICL-Marker basierend auf dem Zustand von mapLayersVisibility.TALASICL
|
|
|
|
useEffect(() => {
|
|
if (!map || !talasiclMarkers) return;
|
|
//console.log("talasiclMarkers", talasiclMarkers);
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
talasiclMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
talasiclMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
|
|
// Verwendung der Map, um den internen Namen zu bekommen, und Fallback auf "TALASICL", falls nicht gefunden
|
|
const internalName =
|
|
layerNames["TALAS ICL"] || "TALASICL || talasiclMarkers ";
|
|
toggleLayer(mapLayersVisibility[internalName]);
|
|
//console.log("internalName for TALAS ICL in MapComponent: ", internalName);
|
|
}, [map, talasiclMarkers, mapLayersVisibility]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der DAUZ-Marker basierend auf dem Zustand von mapLayersVisibility.DAUZ
|
|
|
|
useEffect(() => {
|
|
if (!map || !dauzMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
dauzMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
dauzMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.DAUZ);
|
|
}, [map, dauzMarkers, mapLayersVisibility.DAUZ]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der SMSFunkmodem-Marker basierend auf dem Zustand von mapLayersVisibility.SMSFunkmodem
|
|
|
|
useEffect(() => {
|
|
if (!map || !smsfunkmodemMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
smsfunkmodemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
smsfunkmodemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.SMSFunkmodem);
|
|
}, [map, smsfunkmodemMarkers, mapLayersVisibility.SMSFunkmodem]);
|
|
|
|
//------------------------------------------ */
|
|
//------------------------------------------ */
|
|
// Funktion zum Ein- und Ausblenden der Messstellen-Marker basierend auf dem Zustand von mapLayersVisibility.Messstellen
|
|
|
|
useEffect(() => {
|
|
if (!map || !messstellenMarkers) return;
|
|
const toggleLayer = (isVisible) => {
|
|
if (isVisible) {
|
|
messstellenMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
|
} else {
|
|
messstellenMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
|
}
|
|
};
|
|
// Apply visibility
|
|
toggleLayer(mapLayersVisibility.Messstellen);
|
|
}, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);
|
|
|
|
//------------------------------------------ */
|
|
const selectedArea = useRecoilValue(selectedAreaState);
|
|
|
|
// Combine all markers into a single array
|
|
const allMarkers = [
|
|
...talasMarkers,
|
|
...eciMarkers,
|
|
...gsmModemMarkers,
|
|
...ciscoRouterMarkers,
|
|
...wagoMarkers,
|
|
...siemensMarkers,
|
|
...otdrMarkers,
|
|
...wdmMarkers,
|
|
...gmaMarkers,
|
|
...messstellenMarkers,
|
|
...talasiclMarkers,
|
|
...dauzMarkers,
|
|
...smsfunkmodemMarkers,
|
|
...sonstigeMarkers,
|
|
...ulafMarkers,
|
|
];
|
|
|
|
// Function to find a marker by areaName across all groups
|
|
const findMyMarker = (areaName) => {
|
|
return allMarkers.find((marker) => marker.options.areaName === areaName);
|
|
};
|
|
|
|
// Effect to handle navigation to selected area
|
|
useEffect(() => {
|
|
if (selectedArea && map) {
|
|
const marker = findMyMarker(selectedArea);
|
|
if (marker) {
|
|
map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed
|
|
}
|
|
}
|
|
}, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies
|
|
|
|
/* const findMyMarker = (areaName) => {
|
|
// Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
|
|
return talasMarkers.find((marker) => marker.options.areaName === areaName);
|
|
}; */
|
|
|
|
//------------------------------------------
|
|
|
|
const zoomTrigger = useRecoilValue(zoomTriggerState);
|
|
|
|
useEffect(() => {
|
|
if (map) {
|
|
var x = 51.41321407879154;
|
|
var y = 7.739617925303934;
|
|
var zoom = 7;
|
|
|
|
if (map && map.flyTo) {
|
|
map.flyTo([x, y], zoom);
|
|
} else {
|
|
console.error("Map object is not ready or does not have flyTo method");
|
|
} // Ihre bereits existierende Funktion, die Zoom-Out ausführt
|
|
}
|
|
}, [map, zoomTrigger]);
|
|
|
|
//---------------------------------------------------------
|
|
useEffect(() => {
|
|
console.log("Aktualisierung in MapComponent.js:", poiReadTrigger);
|
|
|
|
// Logik zur Aktualisierung der Map hier hinzufügen
|
|
// Beispiel: Daten neu laden oder aktualisieren
|
|
}, [poiReadTrigger]);
|
|
//---------------------------------------------------------
|
|
// Now update checkOverlappingMarkers to check if oms is initialized
|
|
function checkOverlappingMarkers(map, markers, plusIcon) {
|
|
// Ensure markers is always an array
|
|
if (!Array.isArray(markers)) {
|
|
//console.error("The `markers` argument is not an array:", markers);
|
|
return;
|
|
}
|
|
|
|
const overlappingGroups = {};
|
|
|
|
// Group markers by coordinates as strings
|
|
markers.forEach((marker) => {
|
|
const latlngStr = marker.getLatLng().toString();
|
|
if (overlappingGroups[latlngStr]) {
|
|
overlappingGroups[latlngStr].push(marker);
|
|
} else {
|
|
overlappingGroups[latlngStr] = [marker];
|
|
}
|
|
});
|
|
|
|
// Add plus markers at coordinates where overlaps occur
|
|
for (const coords in overlappingGroups) {
|
|
if (overlappingGroups[coords].length > 1) {
|
|
const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
|
|
const plusMarker = L.marker(latLng, { icon: plusIcon });
|
|
plusMarker.addTo(map);
|
|
|
|
//console.log("Adding plus icon marker at", latLng);
|
|
}
|
|
}
|
|
}
|
|
|
|
//---------------------------------------------------------
|
|
useEffect(() => {
|
|
if (map) {
|
|
// Combine all markers from different layers
|
|
const allMarkers = [
|
|
...talasMarkers,
|
|
...eciMarkers,
|
|
...gsmModemMarkers,
|
|
...ciscoRouterMarkers,
|
|
...wagoMarkers,
|
|
...siemensMarkers,
|
|
...otdrMarkers,
|
|
...wdmMarkers,
|
|
...gmaMarkers,
|
|
...messstellenMarkers,
|
|
...talasiclMarkers,
|
|
...dauzMarkers,
|
|
...smsfunkmodemMarkers,
|
|
...sonstigeMarkers,
|
|
...ulafMarkers,
|
|
];
|
|
|
|
// Call the function to check for overlaps and add plus icons
|
|
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
|
|
}
|
|
}, [
|
|
map,
|
|
talasMarkers,
|
|
eciMarkers,
|
|
gsmModemMarkers,
|
|
ciscoRouterMarkers,
|
|
wagoMarkers,
|
|
siemensMarkers,
|
|
otdrMarkers,
|
|
wdmMarkers,
|
|
gmaMarkers,
|
|
messstellenMarkers,
|
|
talasiclMarkers,
|
|
dauzMarkers,
|
|
smsfunkmodemMarkers,
|
|
sonstigeMarkers,
|
|
ulafMarkers,
|
|
]);
|
|
|
|
//---------------------------------------------------------
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
{/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
|
|
{showPopup && (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
|
|
onClick={closePopup} // Schließt das Popup bei einem Klick außerhalb
|
|
>
|
|
<div
|
|
className="relative bg-white p-6 rounded-lg shadow-lg"
|
|
onClick={(e) => e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
|
|
>
|
|
{/* Schließen-Button oben rechts */}
|
|
<button
|
|
onClick={closePopup}
|
|
className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600"
|
|
aria-label="Close"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Formular-Komponente zum Hinzufügen einer Station */}
|
|
<ShowAddStationPopup
|
|
onClose={closePopup}
|
|
onSubmit={handleAddStation}
|
|
latlng={popupCoordinates}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<DataSheet className="z-50" />
|
|
|
|
<div
|
|
id="map"
|
|
ref={mapRef}
|
|
className="z-0"
|
|
style={{ height: "100vh", width: "100vw" }}
|
|
></div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MapComponent;
|