diff --git a/components/MapComponent.js b/components/MapComponent.js
index 8d92a88d5..607a75529 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -279,14 +279,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}, [mapRef, map]); // Abhängigkeiten prüfen
// Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
- useEffect(() => {
+/* useEffect(() => {
// Remove old markers
if (map) {
- /* map.eachLayer((layer) => {
+ map.eachLayer((layer) => {
if (layer instanceof L.Marker) {
map.removeLayer(layer);
}
- }); */
+ });
// Add new markers
locations.forEach((location) => {
@@ -302,10 +302,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
id: location.idPoi,
});
- /* marker.bindPopup(
+ marker.bindPopup(
`
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`,
{ permanent: false, closeButton: true }
- ); */
+ );
marker.bindTooltip(
`${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`,
{ permanent: false, direction: "top", offset: [0, -30] }
@@ -323,7 +323,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.addTo(map);
});
}
- }, [map, locations, onLocationUpdate]);
+ }, [map, locations, onLocationUpdate]); */
//------------------------------------------
function parsePoint(pointString) {
@@ -549,7 +549,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
// minor-marker-icon-23.png
// Marker hinzufügen für GisStationsStaticDistrict
- useEffect(() => {
+ /* useEffect(() => {
// Stellen Sie sicher, dass sowohl `map` als auch `oms` initialisiert sind
if (!map || !oms) {
console.error("Map or OMS is not initialized");
@@ -668,22 +668,202 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
${statusInfo}
`);
let LocID = station.IdLocation;
- /* marker
- .bindTooltip(
- `${LocID}
`,
- {
- permanent: true,
- direction: "right",
- opacity: 0,
- offset: L.point({ x: 10, y: 0 }),
- }
- )
- .addTo(GMA); */
+
});
}, [map, oms, GisStationsStaticDistrict, GisStationsStatusDistrict]);
- //------------------------------------------
+ //------------------------------------------ */
+ //------------------------------------------ */
+ //useEffect zusammen von MySQL Daten bank und von APIs
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const responses = await Promise.all([
+ fetch(mapGisStationsStaticDistrictUrl),
+ fetch(mapGisStationsStatusDistrictUrl),
+ // Andere relevante API-Anfragen
+ ]);
+ const data = await Promise.all(responses.map(res => res.json()));
+
+ if (data[0] && data[0].Points) {
+ setGisStationsStaticDistrict(data[0].Points);
+ } else {
+ console.error('Daten für GisStationsStaticDistrict nicht gefunden');
+ setGisStationsStaticDistrict([]);
+ }
+
+ if (data[1] && data[1].Statis) {
+ setGisStationsStatusDistrict(data[1].Statis);
+ } else {
+ console.error('Daten für GisStationsStatusDistrict nicht gefunden');
+ setGisStationsStatusDistrict([]);
+ }
+
+ // Weitere Datenverarbeitung...
+
+ } catch (error) {
+ console.error("Fehler beim Laden der Daten: ", error);
+ // Setzen Sie Zustände auf leere Arrays oder Fehlerzustände
+ }
+ };
+
+ fetchData();
+ }, []);
+
+ useEffect(() => {
+ if (!map) return;
+ map.eachLayer((layer) => {
+ if (layer instanceof L.Marker) {
+ map.removeLayer(layer);
+ }
+ });
+
+ // Marker für lokale MySQL-Daten
+ locations.forEach((location) => {
+ const { latitude, longitude } = parsePoint(location.position);
+ const marker = L.marker([latitude, longitude], {
+ icon: L.icon({
+ iconUrl: "/location.svg",
+ iconSize: [34, 34],
+ iconAnchor: [17, 34],
+ popupAnchor: [0, -34],
+ }),
+ draggable: true,
+ id: location.idPoi,
+ });
+
+ marker.bindPopup(
+ `${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`,
+ { permanent: false, closeButton: true }
+ );
+ marker.bindTooltip(
+ `${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`,
+ { permanent: false, direction: "top", offset: [0, -30] }
+ );
+
+ marker.on("dragend", function (e) {
+ const newLat = e.target.getLatLng().lat;
+ const newLng = e.target.getLatLng().lng;
+ const markerId = e.target.options.id;
+ updateLocationInDatabase(markerId, newLat, newLng).then(() => {
+ onLocationUpdate(markerId, newLat, newLng);
+ });
+ });
+
+ marker.addTo(map);
+ });
+
+ // Marker für GisStationsStaticDistrict
+ GisStationsStaticDistrict.forEach((station) => {
+ // Filter für Statusobjekte dieser spezifischen Station
+ const matchingStatuses = GisStationsStatusDistrict.filter(
+ (status) => status.IdLD === station.IdLD
+ );
+
+ const marker = L.marker([station.X, station.Y], {
+ icon: L.icon({
+ iconUrl: "default-icon.png", // Default, wird geändert
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ shadowSize: [41, 41],
+ }),
+ }).addTo(map);
+
+ // Popup beim Überfahren mit der Maus öffnen
+ marker.on("mouseover", function (e) {
+ this.openPopup();
+ });
+
+ // Popup schließen, wenn die Maus den Marker verlässt
+ marker.on("mouseout", function (e) {
+ this.closePopup();
+ });
+
+ // String-Zusammenstellung für das Popup-Infofenster
+ let statusInfo = matchingStatuses
+ .reverse()
+ .map(
+ (status) => `
+
+
+ ${status.Me}
(${status.Na})
+
+ `
+ )
+ .join("");
+
+ // Bestimmen des Icons basierend auf dem Status
+ let iconPath = getIconPath(
+ matchingStatuses[0]?.Na || "",
+ station.Icon,
+ marker
+ );
+
+ marker.setIcon(
+ L.icon({
+ iconUrl: iconPath,
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ shadowSize: [41, 41],
+ })
+ );
+ // Check if the icon path includes 'critical' and initiate bouncing
+ if (
+ iconPath.includes("critical") ||
+ iconPath.includes("major") ||
+ iconPath.includes("minor") ||
+ iconPath.includes("system")
+ ) {
+ marker.setBouncingOptions({
+ bounceHeight: 15,
+ contractHeight: 12,
+ bounceSpeed: 52,
+ contractSpeed: 52,
+ shadowAngle: null,
+ });
+ marker.bounce(3);
+ }
+ // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
+ if (station.LD_Name === "GMA Littwin (TEST)") {
+ marker.bindTooltip(
+ `${station.Area_Name}
`,
+ {
+ permanent: true,
+ direction: "right",
+ opacity: 1, // Tooltip immer sichtbar
+ offset: L.point({ x: 10, y: 0 }),
+ }
+ ).addTo(GMA);
+ } else {
+ marker.bindTooltip(
+ `${station.LD_Name}
`,
+ {
+ permanent: false,
+ direction: "right",
+ opacity: 0,
+ offset: L.point({ x: 10, y: 0 }),
+ }
+ ).addTo(GMA);
+ }
+ // Marker zu OMS und der Karte hinzufügen
+ oms.addMarker(marker);
+ marker.addTo(map).bindPopup(`
+ ${station.LD_Name}
+ ${station.Device}
+ ${station.Area_Short} (${station.Area_Name})
+ ${station.Location_Short} (${station.Location_Name})
+ ${statusInfo}
+ `);
+ let LocID = station.IdLocation;
+
+ });
+ }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
+
+
+ //------------------------------------------ */
let uniqueIdLDsData = [];
let Tooltip = [];