server_photo_s85js/public/js/map/mapboxMarkers.js.ok5

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