// public/js/map/mapboxMarkers.js // =================================== // MAPBOX MARKERS CONTROLLER // =================================== (() => { "use strict"; let mapboxMap = null; // =================================== // STATO // =================================== const state = { photos: [], activities: [], routes: [], }; let mapEventsInitialized = false; // =================================== // MAPPA // =================================== function setMap(map) { if (!map) { console.error( "[MapboxMarkers] mappa non valida", ); return; } mapboxMap = map; console.log( "[MapboxMarkers] mappa collegata", ); // ================================= // COLLEGA MODULI PHOTOS // ================================= if (window.PhotoSource) { console.log( "[MapboxMarkers] collego PhotoSource", ); } if (window.MapboxPhotoClusters) { window.MapboxPhotoClusters.setMap( mapboxMap, ); } if (window.MapboxPhotoMarkers) { window.MapboxPhotoMarkers.setMap( mapboxMap, ); } if (window.MapboxPhotoSpiderfy) { window.MapboxPhotoSpiderfy.setMap( mapboxMap, ); } // ================================= // COLLEGA MODULI ACTIVITIES // ================================= if (window.ActivitySource) { console.log( "[MapboxMarkers] collego ActivitySource", ); } if (window.MapboxActivityClusters) { window.MapboxActivityClusters.setMap( mapboxMap, ); } if (window.MapboxActivityMarkers) { window.MapboxActivityMarkers.setMap( mapboxMap, ); } // ================================= // EVENTI MAPPA // ================================= setupMapEvents(); // ================================= // CREA SOURCE/LAYER SE NECESSARIO // ================================= initializeModules(); // ================================= // RIPRISTINA DATI GIÀ PRESENTI // ================================= refreshAll(); } // =================================== // INIZIALIZZAZIONE MODULI // =================================== function initializeModules() { if (!mapboxMap) { return; } if (!mapboxMap.isStyleLoaded()) { return; } // ================================= // PHOTOS // ================================= if ( state.photos.length && window.PhotoSource ) { window.PhotoSource.update( mapboxMap, state.photos, ); } if ( window.MapboxPhotoClusters ) { window.MapboxPhotoClusters.createLayer(); } // ================================= // ACTIVITIES // ================================= if ( state.activities.length && window.ActivitySource ) { window.ActivitySource.update( mapboxMap, state.activities, ); } if ( window.MapboxActivityClusters ) { window.MapboxActivityClusters.createLayer(); } } // =================================== // EVENTI MAPPA // =================================== function setupMapEvents() { if (!mapboxMap) { return; } if (mapEventsInitialized) { return; } mapEventsInitialized = true; // ================================= // STYLE LOAD // ================================= mapboxMap.on( "styledata", () => { if (!mapboxMap) { return; } console.log( "[MapboxMarkers] styledata", ); initializeModules(); refreshAll(); }, ); // ================================= // MOVE END // ================================= mapboxMap.on( "moveend", () => { if (!mapboxMap) { return; } console.log( "[MapboxMarkers] moveend", ); refreshAll(); }, ); // ================================= // IDLE // ================================= mapboxMap.on( "idle", () => { if (!mapboxMap) { return; } refreshAll(); }, ); } // =================================== // REFRESH PHOTOS // =================================== function refreshPhotos() { if (!mapboxMap) { return; } if ( window.MapboxPhotoSpiderfy?.isOpen?.() ) { return; } // ================================= // CLUSTER // ================================= if ( window.MapboxPhotoClusters ) { window.MapboxPhotoClusters.update(); } // ================================= // MARKER FOTO // ================================= if ( window.MapboxPhotoMarkers ) { window.MapboxPhotoMarkers.update( state.photos, ); } } // =================================== // REFRESH ACTIVITIES // =================================== function refreshActivities() { if (!mapboxMap) { return; } // ================================= // CLUSTER // ================================= if ( window.MapboxActivityClusters ) { window.MapboxActivityClusters.update(); } // ================================= // MARKER // ================================= if ( window.MapboxActivityMarkers ) { window.MapboxActivityMarkers.update( state.activities, ); } } // =================================== // REFRESH ROUTES // =================================== function refreshRoutes() { /* * Le routes non sono clusterizzate. * * Non serve quindi nessun modulo * aggiuntivo per ora. */ } // =================================== // REFRESH COMPLETO // =================================== function refreshAll() { if (!mapboxMap) { return; } if (!mapboxMap.isStyleLoaded()) { return; } initializeModules(); refreshPhotos(); refreshActivities(); refreshRoutes(); } // =================================== // PHOTOS // =================================== function setPhotos(features = []) { state.photos.length = 0; state.photos.push( ...features, ); console.log( "[MapboxMarkers] photos:", state.photos.length, ); if (!mapboxMap) { return; } if (!mapboxMap.isStyleLoaded()) { return; } // ================================= // SOURCE // ================================= if (window.PhotoSource) { window.PhotoSource.update( mapboxMap, state.photos, ); } else { console.warn( "[MapboxMarkers] PhotoSource non disponibile", ); } // ================================= // LAYER CLUSTER // ================================= if ( window.MapboxPhotoClusters ) { window.MapboxPhotoClusters.createLayer(); } // ================================= // ATTENDI MAPBOX // ================================= mapboxMap.once( "idle", () => { if (!mapboxMap) { return; } refreshPhotos(); }, ); } // =================================== // ACTIVITIES // =================================== function setActivities( features = [], ) { state.activities.length = 0; state.activities.push( ...features, ); console.log( "[MapboxMarkers] activities:", state.activities.length, ); if (!mapboxMap) { return; } if (!mapboxMap.isStyleLoaded()) { return; } // ================================= // SOURCE // ================================= if (window.ActivitySource) { window.ActivitySource.update( mapboxMap, state.activities, ); } else { console.warn( "[MapboxMarkers] ActivitySource non disponibile", ); } // ================================= // LAYER CLUSTER // ================================= if ( window.MapboxActivityClusters ) { window.MapboxActivityClusters.createLayer(); } // ================================= // ATTENDI MAPBOX // ================================= mapboxMap.once( "idle", () => { if (!mapboxMap) { return; } refreshActivities(); }, ); } // =================================== // ROUTES // =================================== function setRoutes( features = [], ) { state.routes.length = 0; state.routes.push( ...features, ); console.log( "[MapboxMarkers] routes:", state.routes.length, ); if (!mapboxMap) { return; } if (!mapboxMap.isStyleLoaded()) { return; } const data = { type: "FeatureCollection", features: state.routes, }; const source = mapboxMap.getSource( "routes", ); // ================================= // SOURCE ESISTENTE // ================================= if (source) { source.setData(data); return; } // ================================= // CREA SOURCE // ================================= mapboxMap.addSource( "routes", { type: "geojson", data, }, ); // ================================= // CREA LAYER // ================================= if ( !mapboxMap.getLayer( "routes-line", ) ) { mapboxMap.addLayer({ id: "routes-line", type: "line", source: "routes", paint: { "line-color": "#ff6b00", "line-width": 4, "line-opacity": 0.8, }, }); } } // =================================== // GET PHOTOS // =================================== function getPhotos() { return state.photos; } // =================================== // GET ACTIVITIES // =================================== function getActivities() { return state.activities; } // =================================== // GET ROUTES // =================================== function getRoutes() { return state.routes; } // =================================== // GET MAP // =================================== function getMap() { return mapboxMap; } // =================================== // DEBUG // =================================== function debug() { console.log( "[MapboxMarkers DEBUG]", { map: !!mapboxMap, photos: state.photos.length, activities: state.activities.length, routes: state.routes.length, photoSource: !!mapboxMap?.getSource( "photos", ), photoClusters: !!mapboxMap?.getLayer( "photos-clusters", ), activitySource: !!mapboxMap?.getSource( "activities", ), activityClusters: !!mapboxMap?.getLayer( "activities-clusters", ), photoMarkers: window .MapboxPhotoMarkers ?.size?.() ?? 0, photoClusterMarkers: window .MapboxPhotoClusters ?.size?.() ?? 0, spiderfy: window .MapboxPhotoSpiderfy ?.isOpen?.() ?? false, activityMarkers: window .MapboxActivityMarkers ?.size?.() ?? 0, activityClusterMarkers: window .MapboxActivityClusters ?.size?.() ?? 0, }, ); } // =================================== // API PUBBLICA // =================================== window.debugMapboxMarkers = debug; window.MapboxMarkers = { setMap, setPhotos, setActivities, setRoutes, getPhotos, getActivities, getRoutes, getMap, refreshAll, debug, }; })();