- `,
- {
- 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);
- //-------------------------------------------
-
- // 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
- //console.log("talasMarkers", talasMarkers);
- //console.log("talasMarkers.color", talasMarkers.color);
- talasMarkers.forEach((marker) => map.removeLayer(marker));
- /* const polyline = L.polyline(linePositions, { color: lineColor }).addTo(
- //Linien-Farbe /Farbe für die Strecke zwischen den Markern
- TALAS
- ); */
- }
- /* 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]);
-
- //------------------------------------------ */
-
- // 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]);
-
- //------------------------------------------ */
-
- // 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
-
- //------------------------------------------
-
- 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]); */
- //---------------------------------------------------------
-
- //---------------------------------------------------------
- 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,
- ]);
-
- //LINESTRING (53.151257 8.190471,53.161601 8.129359,53.19802 8.092366,53.244065 8.014003,53.252539 7.954265)
-
- const [lineColors, setLineColors] = useState({});
-
- // API-Aufruf, um Farben der Linien abzurufen
- useEffect(() => {
- const fetchLinesColor = async () => {
- try {
- const response = await fetch("/api/linesColorApi");
- const data = await response.json();
- const colorsByModule = {};
- data.linesColor.Statis.forEach((item) => {
- colorsByModule[item.IdModul] = item.Co;
- });
- setLineColors(colorsByModule);
- } catch (error) {
- console.error("Fehler beim Abrufen der linesColorApi Daten:", error);
- }
- };
- fetchLinesColor();
- }, []);
-
- // Überwachen des lineColors Zustandes
- useEffect(() => {
- console.log("Aktualisierte lineColors", lineColors);
- }, [lineColors]);
-
- const [linePositions, setLinePositions] = useState([]);
-
- useEffect(() => {
- const endpoint = "/api/readGisLines";
- fetch(endpoint)
- .then((response) => {
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- return response.json();
- })
- .then((data) => {
- const newLinePositions = data.map((item) => {
- if (item.points && Array.isArray(item.points)) {
- return {
- coordinates: item.points.map((point) => [point.x, point.y]),
- idModul: item.idModul,
- };
- } else {
- throw new Error("Points missing or not an array");
- }
- });
- setLinePositions(newLinePositions);
- })
- .catch((error) => {
- console.error("Error fetching data:", error.message);
- });
- }, []);
-
- // Karte-Linien Zeichnen
- useEffect(() => {
- if (!map) return;
-
- linePositions.forEach((lineData) => {
- if (lineData.coordinates.length > 0) {
- const color = lineColors[lineData.idModul] || "#000000"; // Standardfarbe schwarz, wenn keine Farbe gefunden
- const polyline = L.polyline(lineData.coordinates, { color }).addTo(map);
-
- L.circleMarker(lineData.coordinates[0], {
- radius: 5,
- fillColor: "#0000FF",
- color: "#0000FF",
- weight: 1,
- opacity: 1,
- fillOpacity: 0.8,
- }).addTo(map);
-
- L.circleMarker(lineData.coordinates[lineData.coordinates.length - 1], {
- radius: 5,
- fillColor: "#0000FF",
- color: "#0000FF",
- weight: 1,
- opacity: 1,
- fillOpacity: 0.8,
- }).addTo(map);
-
- for (let i = 1; i < lineData.coordinates.length - 1; i++) {
- L.circleMarker(lineData.coordinates[i], {
- radius: 3,
- fillColor: "#FFFF00",
- color: "#FFFF00",
- weight: 1,
- opacity: 1,
- fillOpacity: 0.8,
- }).addTo(map);
- }
- }
- });
- }, [map, linePositions, lineColors]);
- //---------------------------------------------------------
-
- return (
- <>
-
-
- {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
- {showPoiUpdateModal && (
-
-
e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
- >
- {/* Schließen-Button oben rechts */}
-
-
- {/* Formular-Komponente zum Hinzufügen einer Station */}
- setShowPoiUpdateModal(false)}
- poiData={currentPoiData}
- onSubmit={handleAddStation}
- latlng={popupCoordinates}
- />
-
-
- )}
-
-
- {/* Rest of your component */}
-
- {/* 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 */}
-
-
-