diff --git a/components/MapComponent.js b/components/MapComponent.js index 7a90093ca..8b18e3214 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -552,7 +552,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, [map]); //-------------------- // Diese useEffect wird nur beim ersten Rendering oder wenn sich `map` ändert, ausgeführt // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs -/* useEffect(() => { + /* useEffect(() => { // Remove old markers if (map) { // Entfernen der alten DBLayer und Erstellung einer neuen @@ -614,7 +614,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Sicherstellen, dass die alte dbLayer entfernt wird map.removeLayer(poiLayerRef.current); poiLayerRef.current = new L.LayerGroup().addTo(map); - + locations.forEach((location) => { const { latitude, longitude } = parsePoint(location.position); const marker = L.marker([latitude, longitude], { @@ -627,20 +627,20 @@ const MapComponent = ({ locations, onLocationUpdate }) => { draggable: true, id: location.idPoi, }); - + // Popup binden, aber nicht automatisch öffnen marker.bindPopup( `${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}` ); - + // Event-Handler für Mouseover und Mouseout hinzufügen - marker.on("mouseover", function() { + marker.on("mouseover", function () { this.openPopup(); }); - marker.on("mouseout", function() { + marker.on("mouseout", function () { this.closePopup(); }); - + marker.on("dragend", function (e) { const newLat = e.target.getLatLng().lat; const newLng = e.target.getLatLng().lng; @@ -649,12 +649,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => { onLocationUpdate(markerId, newLat, newLng); }); }); - + marker.addTo(poiLayerRef.current); }); } }, [map, locations, onLocationUpdate]); // Dieser Effekt läuft, wenn `map`, `locations` oder `onLocationUpdate` sich ändern - function parsePoint(position) { const [longitude, latitude] = position.slice(6, -1).split(" "); @@ -953,10 +952,70 @@ const MapComponent = ({ locations, onLocationUpdate }) => { //-------------------------------------------------------------------------------- useEffect(() => { if (map && gmaMarkers.length) { + // Filtern des Arrays um nur "GMA" Messungen zu erhalten + const gmaMeasurements = GisStationsMeasurements.filter( + (m) => m.Gr === "GMA" + ); + let area_name = ""; + let measurements = {}; + + gmaMeasurements.forEach((m) => { + console.log(`Messung: ${m.Area_Name}, Na: ${m.Na}, Wert: ${m.Val}`); + area_name = m.Area_Name; // Dies überschreibt area_name mit dem letzten Area_Name im Array + measurements[m.Na] = m.Val; // Speichert den Wert von Val unter dem Code Na in einem Objekt + }); + + // Zugriff auf die Werte über die Codes + let measurementLT = measurements["LT"]; + let measurementFTP = measurements["FTP"]; + let measurementGT = measurements["GT"]; + let measurementRLF = measurements["RLF"]; + + console.log( + "area_name", + area_name, + "------measurementLT", + measurements.LT, + "-------measurementFBT", + measurements.FBT, + "------measurementGT", + measurements.GT, + "------measurementRLF", + measurements.RLF + ); + console.log("measurements", measurements); gmaMarkers.forEach((marker) => { marker.addTo(map); oms.addMarker(marker); + // Tooltip beim Überfahren mit der Maus anzeigen + marker.bindTooltip( + ` +
+
+ ${area_name} +
+
+ LT : ${measurements.LT} °C +
+
+ FBT : ${measurements.FBT} °C +
+
+ GT : ${measurements.GT === 'nicht ermittelbar' ? measurements.GT : `${measurements.GT} °C`} +
+
+ RLF : ${measurements.RLF} % +
+
+ `, + { + permanent: true, // true würde den Tooltip immer anzeigen + direction: "auto", // oder 'top', 'bottom', 'left', 'right' + } + ); + + // Popup beim Überfahren mit der Maus öffnen und schließen marker.on("mouseover", function () { this.openPopup(); @@ -967,9 +1026,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }); map.addLayer(GMA); } - }, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken + }, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `gmaMarkers` beschränken console.log("gmaMarkers", gmaMarkers); + //------------------------------------------- //-------------------------------------------------------------------------------- useEffect(() => { @@ -1339,7 +1399,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, [map, dauzMarkers, mapLayersVisibility.DAUZ]); //------------------------------------------ */ - //------------------------------------------ */ + //------------------------------------------ */ // Funktion zum Ein- und Ausblenden der SMSFunkmodem-Marker basierend auf dem Zustand von mapLayersVisibility.SMSFunkmodem useEffect(() => { @@ -1356,7 +1416,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, [map, smsfunkmodemMarkers, mapLayersVisibility.SMSFunkmodem]); //------------------------------------------ */ - //------------------------------------------ */ + //------------------------------------------ */ // Funktion zum Ein- und Ausblenden der Messstellen-Marker basierend auf dem Zustand von mapLayersVisibility.Messstellen useEffect(() => {