`,
{
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 someLineCoordinatesforTalas = [
[53.111111, 8.4625],
[53.111111, 8.4625],
[53.111111, 8.4625],
[53.111111, 8.4625],
]; */
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));
/* console.log("talasMarkers linePositions ", linePositions);
const polyline = L.polyline(someLineCoordinatesforTalas, {
color: "green",
}).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 [linePositions, setLinePositions] = useState([]);
// ------------Linien zeichnen----------------
useEffect(() => {
const endpoint = "/api/talas_v5_DB/gisLines/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);
});
}, []);
//--------------------------- Linien färben ------------------------------
const [lineColors, setLineColors] = useState({});
// API-Aufruf, um Farben der Linien abzurufen
useEffect(() => {
const fetchData = async () => {
try {
const response1 = await fetch(webserviceGisLinesStatusUrl);
const data1 = await response1.json();
const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
const data2 = await response2.json();
const colorsByModule = {};
data1.Statis.forEach((stat) => {
const matchingLine = data2.find(
(item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
);
if (matchingLine) {
colorsByModule[matchingLine.idModul] = stat.PrioColor;
//console.log("Übereinstimmung gefunden für", stat);
/* console.log(
"stat color",
stat.PrioColor,
"matchingLine",
matchingLine.idModul
); */
setLineColors(colorsByModule);
//console.log("colorsByModule: ", colorsByModule);
//console.log("lineColors: ", lineColors);
} else {
//console.log("Keine Übereinstimmung gefunden für", stat);
}
});
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
}, []);
// Überwachen des lineColors Zustandes
useEffect(() => {
//console.log("Aktualisierte lineColors", lineColors);
}, [lineColors]);
//---------------------------------------------------------
// Custom circle icon for draggable markers
const circleIcon = L.divIcon({
className: "custom-div-icon",
html: "",
iconSize: [25, 25],
iconAnchor: [5, 5],
});
//----------------------- Update lines----------------------------------
// Function to initialize markers and polylines
// Initialisieren eines Zustands für die Speicherung der Polyline-Objekte
const [polylines, setPolylines] = useState([]);
const [markers, setMarkers] = useState([]);
useEffect(() => {
if (!map) return;
// Entfernen alter Marker und Polylines
markers.forEach((marker) => marker.remove());
polylines.forEach((polyline) => polyline.remove());
const newMarkers = [];
const newPolylines = [];
linePositions.forEach((lineData, lineIndex) => {
const lineMarkers = [];
const polylinePoints = lineData.coordinates.map((coord, index) => {
const marker = L.marker(coord, {
icon: circleIcon,
draggable: true,
}).addTo(map);
marker.on("dragend", () => {
const newCoords = marker.getLatLng();
const newCoordinates = [...lineData.coordinates];
newCoordinates[index] = [newCoords.lat, newCoords.lng];
const updatedPolyline = L.polyline(newCoordinates, {
color: lineColors[lineData.idModul] || "#000000",
}).addTo(map);
// Event-Handler für mouseover und mouseout erneut einrichten
updatedPolyline.on("mouseover", () => {
updatedPolyline.setStyle({ weight: 8 });
updatedPolyline.bringToFront();
});
updatedPolyline.on("mouseout", () => {
updatedPolyline.setStyle({ weight: 5 });
});
// Ersetzen der alten Polyline durch die neue
newPolylines[lineIndex].remove();
newPolylines[lineIndex] = updatedPolyline;
lineData.coordinates = newCoordinates;
});
lineMarkers.push(marker);
return marker;
});
// Erstellen der Polyline und Einrichten eines Tooltips
const polyline = L.polyline(lineData.coordinates, {
color: lineColors[lineData.idModul] || "#000000",
}).addTo(map);
// Hinzufügen eines Tooltips
polyline.bindTooltip("Informationen oder Name der Linie", {
permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist
direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein
});
polyline.on("mouseover", () => {
polyline.setStyle({ weight: 8 });
polyline.bringToFront();
});
polyline.on("mouseout", () => {
polyline.setStyle({ weight: 5 });
});
newPolylines.push(polyline);
newMarkers.push(...lineMarkers);
});
setMarkers(newMarkers);
setPolylines(newPolylines);
}, [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 */}
