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 = (
  mapContainer,
  setMenuItemAdded,
  addItemsToMapContextMenu,
  hasRights,
  setPolylineEventsDisabled,
  logError = false
) => {
  const basePath = process.env.NEXT_PUBLIC_BASE_PATH;

  if (
    !mapContainer ||
    !(mapContainer instanceof HTMLElement) ||
    !document.body.contains(mapContainer)
  ) {
    if (logError) {
      console.error("❌ Fehler: map container ist nicht definiert oder nicht im DOM.");
    }
    return null;
  }

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

  let tileLayerUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
  try {
    if (window && window.__tileSource) {
      tileLayerUrl = window.__tileSource;
    } else {
      // Synchronous config fetch using XMLHttpRequest (since fetch is async)
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "/config.json", false); // false = synchronous
      xhr.send(null);
      if (xhr.status === 200) {
        const config = JSON.parse(xhr.responseText);
        if (config.tileSources && config.active && config.tileSources[config.active]) {
          window.__tileSource = config.tileSources[config.active];
          tileLayerUrl = window.__tileSource;
        }
      }
    }
  } catch (e) {
    // Fallback bleibt OSM
  }

  let initMap;
  try {
    initMap = L.map(mapContainer, {
      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,
  });

  if (typeof addItemsToMapContextMenu === "function") {
    addItemsToMapContextMenu(initMap, setMenuItemAdded, setPolylineEventsDisabled);
  }
  return { map: initMap, oms: overlappingMarkerSpiderfier };
};