nodeMap/utils/initializeMap.js

// utils/initializeMap.js
import L from "leaflet";
import "leaflet-contextmenu";
import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import "overlapping-marker-spiderfier-leaflet";

export const initializeMap = async (
  mapRef,
  setMap,
  setOms,
  setMenuItemAdded,
  addItemsToMapContextMenu,
  hasRights,
  setPolylineEventsDisabled
) => {
  const basePath = process.env.NEXT_PUBLIC_BASE_PATH;

  if (!mapRef.current) {
    console.error("❌ Fehler: mapRef.current ist nicht definiert.");
    return;
  }

  // Robuste Entfernung einer evtl. alten Leaflet-Instanz und Reset des DOM-Elements
  if (mapRef.current) {
    if (mapRef.current._leaflet_id) {
      try {
        // Leaflet-Instanz entfernen
        if (
          mapRef.current._leaflet_map &&
          typeof mapRef.current._leaflet_map.remove === "function"
        ) {
          mapRef.current._leaflet_map.remove();
        }
        // Leaflet 1.7+ speichert die Map-Instanz in L.Map._instances
        if (L && L.Map && L.Map._instances && mapRef.current._leaflet_id) {
          delete L.Map._instances[mapRef.current._leaflet_id];
        }
        // Auch in L.DomUtil._store ggf. entfernen
        if (L && L.DomUtil && L.DomUtil._store && mapRef.current._leaflet_id) {
          delete L.DomUtil._store[mapRef.current._leaflet_id];
        }
        // _leaflet_id vom DOM-Element entfernen
        delete mapRef.current._leaflet_id;
        // Alle weiteren _leaflet-Properties entfernen
        for (const key in mapRef.current) {
          if (key.startsWith("_leaflet")) {
            try {
              delete mapRef.current[key];
            } catch (e) {}
          }
        }
      } catch (e) {
        console.warn("Fehler beim Entfernen der alten Leaflet-Instanz:", e);
      }
    }
    // Container leeren (immer, auch wenn keine Map-Instanz)
    mapRef.current.innerHTML = "";
  }

  const url = new URL(window.location.origin);
  let tileLayerUrl = "";

  try {
    if (window && window.__tileSource) {
      tileLayerUrl = window.__tileSource;
    } else {
      const res = await fetch("/config.json");
      const config = await res.json();
      if (config.tileSources && config.active && config.tileSources[config.active]) {
        window.__tileSource = config.tileSources[config.active];
        tileLayerUrl = window.__tileSource;
        // Optional: Map reload oder Layer neu setzen, falls gewünscht
      }
    }
  } catch (e) {
    // Fallback bleibt OSM
  }

  let initMap;
  try {
    initMap = L.map(mapRef.current, {
      center: [53.111111, 8.4625],
      zoom: 12,
      minZoom: 5,
      maxZoom: 15,
      zoomControl: false,
      dragging: true,
      contextmenu: true,
      layers: [],
    });
  } catch (e) {
    if (e.message && e.message.includes("Map container is already initialized")) {
      console.warn(
        "Leaflet: Map container is already initialized. Map wird nicht erneut initialisiert."
      );
      return;
    }
    throw e;
  }

  initMap.dragging.enable();

  L.tileLayer(tileLayerUrl, {
    attribution: "© Eigene Kartenquelle (offline)",
    tileSize: 256,
    minZoom: 5,
    maxZoom: 15,
    noWrap: true,
    errorTileUrl: "/img/empty-tile.png", // Optional
  }).addTo(initMap);

  const overlappingMarkerSpiderfier = new OverlappingMarkerSpiderfier(initMap, {
    nearbyDistance: 20,
  });

  setMap(initMap);
  setOms(overlappingMarkerSpiderfier);

  if (typeof addItemsToMapContextMenu === "function") {
    addItemsToMapContextMenu(initMap, setMenuItemAdded, setPolylineEventsDisabled);
  }
};