`,
{
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 [lineColors, setLineColors] = useState({});
// API-Aufruf, um Farben der Linien abzurufen
useEffect(() => {
const fetchLinesColor = async () => {
try {
const response = await fetch(webserviceGisLinesStatusUrl);
const data = await response.json();
console.log("data.Statis: ", data);
const colorsByModule = {};
data.Statis.forEach((item) => {
colorsByModule[item.Modul] = item.PrioColor;
});
setLineColors(colorsByModule);
console.log("colorsByModule", 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/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);
});
}, []);
//---------------------------------------------------------
// Custom circle icon for draggable markers
const circleIcon = L.divIcon({
className: "custom-div-icon",
html: "",
iconSize: [25, 25],
iconAnchor: [5, 5],
});
//---------------------------------------------------------
// Function to initialize markers and polylines
useEffect(() => {
if (!map) return;
linePositions.forEach((lineData) => {
const markers = [];
const color = lineColors[lineData.idModul] || "#000000"; // Default black if no color found
// Create a marker for each coordinate
const polylinePoints = lineData.coordinates.map((coord) => {
const marker = L.marker(coord, {
icon: circleIcon,
draggable: true,
}).addTo(map);
markers.push(marker);
return marker;
});
// Draw polyline
const polyline = L.polyline(lineData.coordinates, { color }).addTo(map);
// Add mouseover and mouseout events to change the polyline width
polyline.on("mouseover", () => {
polyline.setStyle({ weight: 8 }); // Increase width on hover
polyline.bringToFront(); // Bring polyline to the front on hover
});
polyline.on("mouseout", () => {
polyline.setStyle({ weight: 5 }); // Reset width when not hovered (default width can be adjusted)
});
//---------------------------
// Function to update the polyline when markers are dragged
markers.forEach((marker, index) => {
marker.on("dragend", () => {
const newCoords = marker.getLatLng();
lineData.coordinates[index] = [newCoords.lat, newCoords.lng];
polyline.setLatLngs(lineData.coordinates);
// Senden der aktualisierten Koordinaten an den Server
fetch("/api/talas_v5_DB/gisLines/updateGisLines", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
idModul: lineData.idModul,
newCoordinates: lineData.coordinates,
}),
})
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log("Update erfolgreich:", data);
})
.catch((error) => {
console.error("Error updating data:", error.message);
});
});
});
//---------------------------
// Fit map to show all markers and polylines
const group = new L.featureGroup([...markers, polyline]);
// map.fitBounds(group.getBounds().pad(0.5));
});
}, [map, linePositions, lineColors]); // Run this effect when `map` is ready
//---------------------------------------------------------
//---------------------------------------------------------
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 */}
