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

Marker Priorität einsetzen. createAndSetMarkers und determinePriority in MapComponent

Browse Source
This commit is contained in:
ISA
2024-04-26 09:34:41 +02:00
parent ddd39bc1ef
commit 5e36a8db94
1 changed files with 37 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/MapComponent.js
View File

@@ -513,10 +513,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
// Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen
if (
path.includes("critical") ||
path.includes("major") ||
path.includes("minor") ||
path.includes("system")
path.includes("critical") || // Priorität 1
path.includes("major") || // Priorität 2
path.includes("minor") || // Priorität 3
path.includes("system") // Priorität 4
) {
// Setze Bouncing-Optionen
marker.setBouncingOptions({
@@ -698,6 +698,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
//--------------------------------------------------------------------------------
function determinePriority(iconPath) {
if (iconPath.includes("critical")) return 1; // Highest priority
if (iconPath.includes("major")) return 2;
if (iconPath.includes("minor")) return 3;
if (iconPath.includes("system")) return 4;
return 5; // Default priority (lowest)
}
// Daten von einer externen Quelle laden
const createAndSetMarkers = async (systemId, setMarkersFunction) => {
try {
@@ -714,15 +721,25 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
(station) => station.System === systemId
).map((station) => {
const statis = statisMap.get(station.IdLD);
const iconPath = statis
? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
: `img/icons/marker-icon-${station.Icon}.png`;
const priority = determinePriority(iconPath);
const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values
console.log(
`Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}`
);
const marker = L.marker([station.X, station.Y], {
icon: L.icon({
iconUrl: statis
? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
: `img/icons/marker-icon-${station.Icon}.png`,
iconUrl: iconPath,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
zIndexOffset: zIndexOffset,
bounceOnAdd: !!statis,
});
@@ -736,22 +753,23 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
.reverse()
.map(
(status) => `
<div class="flex items-center my-1">
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
</div>
`
<div class="flex items-center my-1">
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
</div>
`
)
.join("");
marker.bindPopup(`
<b>${station.LD_Name}</b><br>
${station.Device}<br>
${station.Area_Short} (${station.Area_Name})<br>
${station.Location_Short} (${station.Location_Name})<br>
${statusInfo}
`);
<b>${station.LD_Name}</b><br>
${station.Device}<br>
${station.Area_Short} (${station.Area_Name})
<br>
${station.Location_Short} (${station.Location_Name})
<br>
${statusInfo}
`);
return marker;
});