diff --git a/components/MapComponent.js b/components/MapComponent.js index 5fe7b3a05..1145050b7 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -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) => ` -