server_photo_s85js/public/js/map/mapboxMarkers.js.ok3

// public/js/map/mapboxMarkers.js
// ===============================
// MAPBOX MARKERS CONTROLLER
// ===============================

(() => {
  "use strict";

  let mapboxMap = null;

  // ===================================
  // STATO
  // ===================================

  const state = {
    photos: [],
    activities: [],
    routes: [],
  };

  // ===================================
  // MAPPA
  // ===================================

  function setMap(map) {
    if (!map) {
      console.error("[MapboxMarkers] mappa non valida");
      return;
    }

    mapboxMap = map;

    console.log("[MapboxMarkers] mappa collegata");

    /*
     * In futuro qui verranno inizializzati:
     *
     * Photos
     * ├── source
     * ├── clusters
     * ├── markers
     * └── spiderfy
     *
     * Activities
     * ├── source
     * ├── clusters
     * └── markers
     */

    setupMapEvents();
  }

  // ===================================
  // EVENTI MAPPA
  // ===================================

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

    mapboxMap.on("moveend", () => {
      console.log("[MapboxMarkers] moveend");
    });

    mapboxMap.on("zoomstart", () => {
      console.log("[MapboxMarkers] zoomstart");
    });
  }

  // ===================================
  // PHOTOS
  // ===================================

  function setPhotos(features = []) {
    state.photos.length = 0;
    state.photos.push(...features);

    console.log("[MapboxMarkers] photos:", state.photos.length);

    if (!mapboxMap) {
      return;
    }

    /*
     * La gestione effettiva delle foto
     * verrà spostata nei moduli:
     *
     * photos/photoSource.js
     * photos/photoClusters.js
     * photos/photoMarkers.js
     * photos/photoSpiderfy.js
     */
    if (window.PhotoSource) {
      window.PhotoSource.update(mapboxMap, state.photos);
    }
  }

  // ===================================
  // ACTIVITIES
  // ===================================

  function setActivities(features = []) {
    state.activities.length = 0;
    state.activities.push(...features);

    console.log("[MapboxMarkers] activities:", state.activities.length);

    /*
     * In futuro:
     *
     * activities/activitySource.js
     * activities/activityClusters.js
     * activities/activityMarkers.js
     */
  }

  // ===================================
  // ROUTES
  // ===================================

  function setRoutes(features = []) {
    state.routes.length = 0;
    state.routes.push(...features);

    if (!mapboxMap || !mapboxMap.isStyleLoaded()) {
      return;
    }

    const data = {
      type: "FeatureCollection",
      features: state.routes,
    };

    const source = mapboxMap.getSource("routes");

    if (source) {
      source.setData(data);
      return;
    }

    mapboxMap.addSource("routes", {
      type: "geojson",
      data,
    });

    mapboxMap.addLayer({
      id: "routes-line",
      type: "line",
      source: "routes",

      paint: {
        "line-color": "#ff6b00",
        "line-width": 4,
        "line-opacity": 0.8,
      },
    });
  }

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

  window.debugMapboxMarkers = debug;

  // ===================================
  // API PUBBLICA
  // ===================================

  window.MapboxMarkers = {
    setMap,
    setPhotos,
    setActivities,
    setRoutes,
  };
})();