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