feat: Kontextmenü-Link für Marker, Linien und GMA vereinheitlicht – openInNewTab verwendet, Port entfernt, /devices/ ergänzt

utils/initializeMap.js

@@ -3,14 +3,11 @@ import L from "leaflet";
 import "leaflet-contextmenu";
 import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
-import { store } from "../redux/store";
-import * as urls from "../config/urls.js";
-import * as layers from "../config/layers.js";
 import "overlapping-marker-spiderfier-leaflet";
 
 export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled) => {
-  const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
-  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
+  const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
+
   if (!mapRef.current) {
     console.error("❌ Fehler: mapRef.current ist nicht definiert.");
     return;
@@ -18,10 +15,13 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
 
   if (mapRef.current._leaflet_id) {
     console.log("⚠️ Karte bereits initialisiert");
-    return; // keine Neuanlage
+    return;
   }
 
-  // Leaflet-Karte erstellen
+  const url = new URL(window.location.origin);
+  const originWithoutPort = `${url.protocol}//${url.hostname}`;
+  const tileLayerUrl = `${originWithoutPort}${basePath}/TileMap/mapTiles/{z}/{x}/{y}.png`;
+
   const initMap = L.map(mapRef.current, {
     center: [53.111111, 8.4625],
     zoom: 12,
@@ -29,91 +29,29 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
     maxZoom: 15,
     zoomControl: false,
     dragging: true,
-    contextmenu: true, // ✅ Sicherstellen, dass Kontextmenü aktiviert ist
-    layers: [
-      layers.MAP_LAYERS.TALAS,
-      layers.MAP_LAYERS.ECI,
-      layers.MAP_LAYERS.GSMModem,
-      layers.MAP_LAYERS.CiscoRouter,
-      layers.MAP_LAYERS.WAGO,
-      layers.MAP_LAYERS.Siemens,
-      layers.MAP_LAYERS.OTDR,
-      layers.MAP_LAYERS.WDM,
-      layers.MAP_LAYERS.GMA,
-      layers.MAP_LAYERS.TALASICL,
-      layers.MAP_LAYERS.Sonstige,
-      layers.MAP_LAYERS.ULAF,
-    ],
+    contextmenu: true,
+    layers: [],
   });
 
   initMap.dragging.enable();
 
-  // 🌍 **🚀 Kontextmenü sicherstellen**
-  if (!initMap.contextmenu) {
-    console.error("❌ `contextmenu` ist nicht verfügbar.");
-    return;
-  }
-
-  // **Kontextmenü für Geräte aktualisieren**
-  initMap.on("contextmenu.show", (e) => {
-    const clickedElement = e.relatedTarget;
-    const selectedDevice = store.getState().selectedDevice; // Redux-Wert abrufen
-
-    if (!initMap.contextmenu || !initMap.contextmenu.items) {
-      console.error("❌ Fehler: `contextmenu` oder `items` ist nicht definiert.");
-      return;
-    }
-
-    try {
-      initMap.contextmenu.removeAllItems(); // **Sicherstellen, dass vorherige Einträge entfernt werden**
-    } catch (error) {
-      console.error("❌ Fehler beim Entfernen der Menüelemente:", error);
-    }
-
-    if (!clickedElement) {
-      console.error("❌ Kein gültiges Ziel für das Kontextmenü.");
-      return;
-    }
-
-    // 🛑 Falls `selectedDevice === null`, kein "Station öffnen" anzeigen
-    if (!selectedDevice || !clickedElement.options?.idDevice) {
-      console.log("ℹ️ Kein Gerät ausgewählt – 'Station öffnen' wird nicht hinzugefügt.");
-      return;
-    }
-
-    // ✅ Falls `selectedDevice` gesetzt ist, "Station öffnen" anzeigen
-    console.log("✅ Gerät erkannt – 'Station öffnen' wird hinzugefügt.");
-    initMap.contextmenu.addItem({
-      text: "Station öffnen (Tab)",
-      icon: "/img/screen_new.png",
-      callback: () => {
-        const link = `http://${window.location.hostname}${basePath}/devices/${selectedDevice.id}`;
-        if (link) {
-          console.log("🟢 Öffne Link in neuem Tab:", link);
-          window.open(link, "_blank");
-        } else {
-          console.error("❌ Kein Link in den Marker-Optionen gefunden.");
-        }
-      },
-    });
-  });
-
-  // Tile-Layer hinzufügen
-  L.tileLayer(urls.OFFLINE_TILE_LAYER, {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+  L.tileLayer(tileLayerUrl, {
+    attribution: "&copy; Eigene Kartenquelle (offline)",
+    tileSize: 256,
+    minZoom: 5,
+    maxZoom: 15,
+    noWrap: true,
+    errorTileUrl: "/img/empty-tile.png", // Optional
   }).addTo(initMap);
 
-  // Initialisiere OverlappingMarkerSpiderfier
   const overlappingMarkerSpiderfier = new OverlappingMarkerSpiderfier(initMap, {
     nearbyDistance: 20,
   });
 
-  // Setze die Map und OMS in den State
   setMap(initMap);
   setOms(overlappingMarkerSpiderfier);
 
-  // Falls Rechte geladen sind, füge das Kontextmenü hinzu
-  if (hasRights && !setMenuItemAdded) {
+  if (typeof addItemsToMapContextMenu === "function") {
     addItemsToMapContextMenu(initMap, setMenuItemAdded, setPolylineEventsDisabled);
   }
 };