// 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, }); })();