server_photo_s85js/public/js/map/terrain3d.js

// public/js/map/terrain3d.js
// Switch Leaflet <-> Mapbox GL Terrain 3D

(() => {
  "use strict";

  let mapboxMap = null;
  let enabled = false;
  let savedLeafletView = null;
  let savedLeafletMap = null;

  function getToken() {
    return window.AppConfig?.mapboxToken || "";
  }

  function getContainer() {
    return document.getElementById("terrainMap");
  }

  function getLeafletMap() {
    if (window.MapEngine?.type === "mapbox") {
      return savedLeafletMap;
    }

    return (
      window.GlobalMap?.getMap?.() ||
      window.MapEngine?.map ||
      window.leafletMap ||
      null
    );
  }

  function createMapbox3D() {
    const container = getContainer();
    const leafletContainer = document.getElementById("globalMap");

    if (!container) {
      console.error("[Terrain3D] #terrainMap non trovato");
      return;
    }

    const token = getToken();

    if (!token) {
      console.error("[Terrain3D] Token Mapbox mancante");
      return;
    }

    container.classList.add("open");
    container.style.display = "block";

    if (!window.mapboxgl) {
      console.error("[Terrain3D] Mapbox GL JS non caricato");
      return;
    }

    // Forza il contenitore visibile
    container.style.display = "block";

    if (!savedLeafletMap) {
      savedLeafletMap = getLeafletMap();
    }

    const leafletMap = savedLeafletMap;

    console.log("[Terrain3D] Leaflet trovato:", leafletMap);

    let center = [12.4964, 41.9028];
    let zoom = 6;

    if (leafletMap) {
      const c = leafletMap.getCenter();

      center = [c.lng, c.lat];
      zoom = leafletMap.getZoom();

      savedLeafletView = {
        lat: c.lat,
        lng: c.lng,
        zoom: leafletMap.getZoom(),
      };

      console.log("[Terrain3D] Vista Leaflet salvata", savedLeafletView);
    }

    // Nasconde Leaflet
    /*    if (leafletMap) {
      container.style.display = "block";
      leafletMap.getContainer().style.display = "none";
    }*/
    // Nasconde solo i layer Leaflet, non il contenitore
    if (leafletMap) {
      const leafletContainer = leafletMap.getContainer();

      leafletContainer.style.visibility = "hidden";
      leafletContainer.style.pointerEvents = "none";
      console.log("[Terrain3D] Leaflet nascosto");
    }

    mapboxgl.accessToken = token;

    mapboxMap = new mapboxgl.Map({
      container: container,
      style: "mapbox://styles/mapbox/outdoors-v12",
      center,
      zoom,
      pitch: 60,
      bearing: -20,
      antialias: true,
    });

    mapboxMap.on("load", () => {
      if (!mapboxMap.getSource("mapbox-dem")) {
        mapboxMap.addSource("mapbox-dem", {
          type: "raster-dem",
          url: "mapbox://mapbox.mapbox-terrain-dem-v1",
          tileSize: 512,
          maxzoom: 14,
        });
      }

      mapboxMap.setTerrain({
        source: "mapbox-dem",
        exaggeration: 1.5,
      });

      mapboxMap.addControl(new mapboxgl.NavigationControl(), "top-right");

      // Aggancia MapEngine al nuovo motore

      if (window.MapEngine) {
        window.MapEngine.setMapbox(mapboxMap);
      }
      /*
      window.MapboxMarkers?.setMap(mapboxMap);

      mapboxMap.once("idle", () => {
        window.refreshTerrainMarkers?.();
      });
*/
      window.MapboxMarkers?.setMap(mapboxMap);

      mapboxMap.on("moveend", () => {
        window.refreshTerrainMarkers?.();
      });

/*      mapboxMap.on("zoomend", () => {
        window.refreshTerrainMarkers?.();
      });
*/
      mapboxMap.once("idle", () => {
        window.refreshTerrainMarkers?.();
      });

      console.log("[Terrain3D] Mapbox 3D attivo");
      /*      requestAnimationFrame(() => {
        mapboxMap.resize();
      });*/
    });
  }

  function destroyMapbox3D() {
    if (!mapboxMap) {
      return;
    }

    console.log("[Terrain3D] Chiusura MapboxGL");

    mapboxMap.remove();
    mapboxMap = null;
    enabled = false;

    const terrainContainer = document.getElementById("terrainMap");

    if (terrainContainer) {
      terrainContainer.classList.remove("open");
      terrainContainer.style.display = "none";
    }

    const leafletContainer = document.getElementById("globalMap");
    if (leafletContainer) {
      leafletContainer.style.visibility = "visible";
      leafletContainer.classList.add("open");
    }

    //const leafletMap = getLeafletMap();
    const leafletMap = savedLeafletMap;

    if (leafletMap) {
      const leafletContainer = leafletMap.getContainer();

      leafletContainer.style.display = "block";
      leafletContainer.style.visibility = "visible";
      leafletContainer.style.pointerEvents = "auto";

      leafletMap.invalidateSize();
      if (savedLeafletView) {
        leafletMap.setView(
          [savedLeafletView.lat, savedLeafletView.lng],
          savedLeafletView.zoom,
        );
      }

      console.log("[Terrain3D] Leaflet ripristinato");
    }

    /*   if (window.MapEngine) {
      window.MapEngine.type = "leaflet";
      window.MapEngine.map = leafletMap;
    }
*/
    console.log("[Terrain3D] ritorno Leaflet");
    if (savedLeafletMap && window.MapEngine) {
      window.MapEngine.type = "leaflet";
      window.MapEngine.map = savedLeafletMap;
      window.MapEngine.markerLayer = window.globalMarkers;
    }
  }

  async function toggle() {
    if (enabled) {
      destroyMapbox3D();
      enabled = false;
    } else {
      createMapbox3D();

      await new Promise((resolve) => {
        const timeout = setTimeout(resolve, 3000);

        const check = setInterval(() => {
          if (mapboxMap) {
            clearInterval(check);
            clearTimeout(timeout);
            resolve();
          }
        }, 50);
      });

      enabled = !!mapboxMap;
    }

    window.updateTerrainButton?.(enabled);
  }

  function isEnabled() {
    return enabled;
  }

  window.refreshTerrainMarkers = function () {
    if (!mapboxMap) {
      return;
    }

    const photos = window.getPhotoMapGeoJSON?.() || [];

    window.MapboxMarkers?.setPhotos(photos);

    const activities = window.getActivityMapGeoJSON?.() || [];

    window.MapboxMarkers?.setActivities(activities);

    const routes = window.getActivityRoutesGeoJSON?.() || [];

    window.MapboxMarkers?.setRoutes(routes);

    console.log("[Terrain3D] marker aggiornati", {
      photos: photos.length,
      activities: activities.length,
      routes: routes.length,
    });
  };

  window.MapTerrain3D = Object.freeze({
    toggle,
    enabled: isEnabled,
  });
})();