+ `,
+ {
+ 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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ 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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ 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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ 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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [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 (
+ <>
+
+ {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
+ {showPopup && (
+
+
e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
+ >
+ {/* Schließen-Button oben rechts */}
+
+
+ {/* Formular-Komponente zum Hinzufügen einer Station */}
+
+
+ `,
+ {
+ 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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ 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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ 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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ 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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [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();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [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 (
+ <>
+
+ {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
+ {showPopup && (
+
+
e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
+ >
+ {/* Schließen-Button oben rechts */}
+
+
+ {/* Formular-Komponente zum Hinzufügen einer Station */}
+
+