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

return one step or fix it

Browse Source
This commit is contained in:
ISA
2024-06-25 15:53:22 +02:00
parent 71ae51abab
commit c350aa5395
1 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/MapComponent.js
View File

@@ -2297,10 +2297,32 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
color: lineColors[lineData.idModul] || "#000000",
}).addTo(map);
// Dynamisch generierter Tooltip-Inhalt
const matchingStatus = lineStatusData.find(
(stat) =>
stat.IdLD === lineData.idLD && stat.Modul === lineData.idModul
);
const dynamicTooltipContent = matchingStatus
? `
<div class="p-0 rounded-lg bg-white bg-opacity-90">
<div class="font-bold text-sm text-black">
<span>DpName: ${matchingStatus.DpName || "Unknown"}</span>
</div>
<div class="font-bold text-xxs text-blue-700">
<span>ModulName: ${matchingStatus.ModulName || "N/A"}</span>
</div>
<div class="font-bold text-xxs text-red-700">
<span>Message: ${matchingStatus.Message || "N/A"}</span>
</div>
</div>
`
: "Informationen oder Name der Linie";
// Hinzufügen eines Tooltips
updatedPolyline.bindTooltip(tooltipContent, {
permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist
direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein
updatedPolyline.bindTooltip(dynamicTooltipContent, {
permanent: false,
direction: "auto",
});
updatedPolyline.on("mouseover", () => {
@@ -2352,14 +2374,35 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
lineMarkers.push(marker);
});
// Dynamisch generierter Tooltip-Inhalt
const matchingStatus = lineStatusData.find(
(stat) => stat.IdLD === lineData.idLD && stat.Modul === lineData.idModul
);
const dynamicTooltipContent = matchingStatus
? `
<div class="p-0 rounded-lg bg-white bg-opacity-90">
<div class="font-bold text-sm text-black">
<span>DpName: ${matchingStatus.DpName || "Unknown"}</span>
</div>
<div class="font-bold text-xxs text-blue-700">
<span>ModulName: ${matchingStatus.ModulName || "N/A"}</span>
</div>
<div class="font-bold text-xxs text-red-700">
<span>Message: ${matchingStatus.Message || "N/A"}</span>
</div>
</div>
`
: "Informationen oder Name der Linie";
// Erstellen der initialen Polyline und Einrichten eines Tooltips
const polyline = L.polyline(lineData.coordinates, {
color: lineColors[lineData.idModul] || "#000000",
}).addTo(map);
polyline.bindTooltip(tooltipContent, {
permanent: false, // true, wenn Sie möchten, dass der Tooltip immer sichtbar ist
direction: "auto", // Kann 'right', 'left', 'top' oder 'bottom' sein
polyline.bindTooltip(dynamicTooltipContent, {
permanent: false,
direction: "auto",
});
polyline.on("mouseover", () => {