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

64
components/MapComponent.js
View File

@@ -655,7 +655,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}
}, [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(" ");
return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
@@ -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(() => {