server_photo_s85js/public/js/map/mapboxMarkers.js.ok2

// public/js/map/mapboxMarkers.js
// ===================================
// MAPBOX MARKERS - ORCHESTRATORE
// ===================================

(() => {
  "use strict";

  let mapboxMap = null;

  const photos = [];
  const activities = [];
  const routes = [];

  // ===================================
  // SET MAP
  // ===================================

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

      return;
    }

    mapboxMap = map;

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

    // ---------------------------------
    // PHOTOS
    // ---------------------------------

    window.MapboxPhotoSource?.setMap(
      mapboxMap,
    );

    window.MapboxPhotoClusters?.setMap(
      mapboxMap,
    );

    window.MapboxPhotoMarkers?.setMap(
      mapboxMap,
    );

    window.MapboxPhotoSpiderfy?.setMap(
      mapboxMap,
    );

    // ---------------------------------
    // ACTIVITIES
    // ---------------------------------

    window.MapboxActivitySource?.setMap(
      mapboxMap,
    );

    window.MapboxActivityClusters?.setMap(
      mapboxMap,
    );

    window.MapboxActivityMarkers?.setMap(
      mapboxMap,
    );

    console.log(
      "[MapboxMarkers] moduli collegati",
    );

    // ---------------------------------
    // PLACEHOLDER
    // ---------------------------------

    mapboxMap.once("load", () => {
      window.MapboxPhotoSource?.ensurePlaceholder?.();
    });
  }

  // ===================================
  // SET PHOTOS
  // ===================================

  function setPhotos(features = []) {
    if (!Array.isArray(features)) {
      console.error(
        "[MapboxMarkers] setPhotos: dati non validi",
      );

      return;
    }

    console.log(
      "[MapboxMarkers] setPhotos:",
      features.length,
    );

    // ---------------------------------
    // AGGIORNA CACHE
    // ---------------------------------

    photos.length = 0;

    photos.push(
      ...features,
    );

    // ---------------------------------
    // SOURCE
    // ---------------------------------

    if (
      window.MapboxPhotoSource
    ) {
      window.MapboxPhotoSource.setData(
        photos,
      );
    }

    // ---------------------------------
    // MARKER
    // ---------------------------------

    if (
      window.MapboxPhotoMarkers
    ) {
      window.MapboxPhotoMarkers.update(
        photos,
      );
    }

    // ---------------------------------
    // CLUSTER
    // ---------------------------------

    if (
      window.MapboxPhotoClusters
    ) {
      window.MapboxPhotoClusters.update();
    }
  }

  // ===================================
  // GET PHOTOS
  // ===================================

  function getPhotos() {
    return photos;
  }

  // ===================================
  // SET ACTIVITIES
  // ===================================

  function setActivities(
    features = [],
  ) {
    if (!Array.isArray(features)) {
      console.error(
        "[MapboxMarkers] setActivities: dati non validi",
      );

      return;
    }

    console.log(
      "[MapboxMarkers] setActivities:",
      features.length,
    );

    // ---------------------------------
    // CACHE
    // ---------------------------------

    activities.length = 0;

    activities.push(
      ...features,
    );

    // ---------------------------------
    // SOURCE
    // ---------------------------------

    if (
      window.MapboxActivitySource
    ) {
      window.MapboxActivitySource.setData(
        activities,
      );
    }

    // ---------------------------------
    // MARKER
    // ---------------------------------

    if (
      window.MapboxActivityMarkers
    ) {
      window.MapboxActivityMarkers.update(
        activities,
      );
    }

    // ---------------------------------
    // CLUSTER
    // ---------------------------------

    if (
      window.MapboxActivityClusters
    ) {
      window.MapboxActivityClusters.update();
    }
  }

  // ===================================
  // GET ACTIVITIES
  // ===================================

  function getActivities() {
    return activities;
  }

  // ===================================
  // SET ROUTES
  // ===================================

  function setRoutes(
    features = [],
  ) {
    if (!Array.isArray(features)) {
      console.error(
        "[MapboxMarkers] setRoutes: dati non validi",
      );

      return;
    }

    if (!mapboxMap) {
      console.warn(
        "[MapboxMarkers] setRoutes: mappa non disponibile",
      );

      return;
    }

    console.log(
      "[MapboxMarkers] setRoutes:",
      features.length,
    );

    routes.length = 0;

    routes.push(
      ...features,
    );

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

    // ---------------------------------
    // SOURCE ESISTENTE
    // ---------------------------------

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

    if (source) {
      source.setData(
        data,
      );

      return;
    }

    // ---------------------------------
    // SOURCE
    // ---------------------------------

    if (
      !mapboxMap.isStyleLoaded()
    ) {
      mapboxMap.once(
        "idle",
        () => {
          setRoutes(routes);
        },
      );

      return;
    }

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

    // ---------------------------------
    // 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 ROUTES
  // ===================================

  function getRoutes() {
    return routes;
  }

  // ===================================
  // UPDATE PHOTOS
  // ===================================

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

    window.MapboxPhotoMarkers?.update(
      photos,
    );

    window.MapboxPhotoClusters?.update();
  }

  // ===================================
  // UPDATE ACTIVITIES
  // ===================================

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

    window.MapboxActivityMarkers?.update(
      activities,
    );

    window.MapboxActivityClusters?.update();
  }

  // ===================================
  // UPDATE ALL
  // ===================================

  function update() {
    updatePhotos();
    updateActivities();
  }

  // ===================================
  // CLEAR PHOTOS
  // ===================================

  function clearPhotos() {
    photos.length = 0;

    window.MapboxPhotoMarkers?.clear();

    window.MapboxPhotoClusters?.clear();

    window.MapboxPhotoSpiderfy?.clear();

    window.MapboxPhotoSource?.clear();
  }

  // ===================================
  // CLEAR ACTIVITIES
  // ===================================

  function clearActivities() {
    activities.length = 0;

    window.MapboxActivityMarkers?.clear();

    window.MapboxActivityClusters?.clear();

    window.MapboxActivitySource?.clear();
  }

  // ===================================
  // DEBUG
  // ===================================

  function debug() {
    console.group(
      "[MapboxMarkers] DEBUG",
    );

    console.log(
      "map:",
      !!mapboxMap,
    );

    console.log(
      "photos:",
      photos.length,
    );

    console.log(
      "activities:",
      activities.length,
    );

    console.log(
      "routes:",
      routes.length,
    );

    console.log(
      "PhotoSource:",
      !!window.MapboxPhotoSource,
    );

    console.log(
      "PhotoClusters:",
      !!window.MapboxPhotoClusters,
    );

    console.log(
      "PhotoMarkers:",
      !!window.MapboxPhotoMarkers,
    );

    console.log(
      "PhotoSpiderfy:",
      !!window.MapboxPhotoSpiderfy,
    );

    console.log(
      "ActivitySource:",
      !!window.MapboxActivitySource,
    );

    console.log(
      "ActivityClusters:",
      !!window.MapboxActivityClusters,
    );

    console.log(
      "ActivityMarkers:",
      !!window.MapboxActivityMarkers,
    );

    console.groupEnd();
  }

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

  window.MapboxMarkers = {
    setMap,

    setPhotos,
    getPhotos,

    setActivities,
    getActivities,

    setRoutes,
    getRoutes,

    updatePhotos,
    updateActivities,
    update,

    clearPhotos,
    clearActivities,

    debug,
  };

  // ===================================
  // COMPATIBILITÀ DEBUG VECCHIO
  // ===================================

  window.debugMapboxPhotos =
    function () {
      console.log(
        "[MapboxMarkers] foto:",
        photos.length,
      );

      console.log(
        "[MapboxMarkers] marker:",
        window.MapboxPhotoMarkers?.size?.() ??
          0,
      );

      console.log(
        "[MapboxMarkers] cluster:",
        window.MapboxPhotoClusters?.size?.() ??
          0,
      );

      console.log(
        "[MapboxMarkers] spiderfy:",
        window.MapboxPhotoSpiderfy?.size?.() ??
          0,
      );
    };
})();