Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tooltip für GMA mit Tailwind style

Browse Source
This commit is contained in:
ISA
2024-04-25 22:13:35 +02:00
parent 82ac370c55
commit 5b338ada12
1 changed files with 72 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
components/MapComponent.js
View File

@@ -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(
`<b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>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(
`
<div class="p-2 rounded-xl bg-opacity-70">
<div class="font-bold text-sm text-gray-700">
<span>${area_name}</span>
</div>
<div class="font-bold text-sm text-gray-700 mt-1">
<span>LT : ${measurements.LT} °C</span>
</div>
<div class="font-bold text-sm text-gray-700 mt-1">
<span>FBT : ${measurements.FBT} °C</span>
</div>
<div class="font-bold text-sm text-gray-700 mt-1">
<span>GT : ${measurements.GT === 'nicht ermittelbar' ? measurements.GT : `${measurements.GT} °C`}</span>
</div>
<div class="font-bold text-sm text-gray-700 mt-1">
<span>RLF : ${measurements.RLF} %</span>
</div>
</div>
`,
{
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(() => {