drupal-erable/web/modules/custom/erable_mod/assets/js/carte-interactive.js

const franceCoordinates = {
  metropole: {
    latTop: 52.0, // Nord-Ouest (coin supérieur gauche)
    lonLeft: -5,
    latBottom: 40.0, // Sud-Est (coin inférieur droit)
    lonRight: 11.0,
  },
  guadeloupe: {
    latTop: 16.5,
    lonLeft: -62,
    latBottom: 15.8,
    lonRight: -60.8,
  },
  martinique: {
    latTop: 14.9,
    lonLeft: -61.3,
    latBottom: 14.3,
    lonRight: -60.7,
  },
  guyanne: {
    latTop: 6,
    lonLeft: -54.8,
    latBottom: 1.8,
    lonRight: -51.2,
  },
  reunion: {
    latTop: -20.8,
    lonLeft: 55.1,
    latBottom: -21.4,
    lonRight: 55.9,
  },
  saintPierreEtMiquelon: {
    latTop: 47.1,
    lonLeft: -56.4,
    latBottom: 46.7,
    lonRight: -56.1,
  },
  mayotte: {
    latTop: -12.6,
    lonLeft: 44.9,
    latBottom: -13,
    lonRight: 45.3,
  },
  saintBarthelemy: {
    latTop: 17.9,
    lonLeft: -62.9,
    latBottom: 17.8,
    lonRight: -62.7,
  },
  saintMartin: {
    latTop: 18.1,
    lonLeft: -63.1,
    latBottom: 17.9,
    lonRight: -62.9,
  },
  wallisEtFutuna: {
    latTop: -13.1,
    lonLeft: -176.2,
    latBottom: -13.3,
    lonRight: -176.1,
  },
  polynesieFrancaise: {
    latTop: -17.4,
    lonLeft: -149.9,
    latBottom: -17.1,
    lonRight: -149,
  },
  nouvelleCaledonie: {
    latTop: -19.3,
    lonLeft: 163.3,
    latBottom: -22.9,
    lonRight: 168.4,
  },
};

const localisationMapPlacements = {
  // en pourcentage de la largeur et hauteur du fond de carte
  metropole: {
    top: 0,
    left: 12.9,
    bottom: 63.48,
    right: 87.14,
  },
  guadeloupe: {
    top: 88.44,
    left: 33.01,
    bottom: 98.77,
    right: 46.25,
  },
  martinique: {
    top: 88.96,
    left: 53.26,
    bottom: 98.24,
    right: 61.99,
  },
  guyanne: {
    top: 88.09,
    left: 69.09,
    bottom: 99.21,
    right: 79.07,
  },
  reunion: {
    top: 75.48,
    left: 89.82,
    bottom: 82.04,
    right: 97.88,
  },
  saintPierreEtMiquelon: {
    top: 75.03,
    left: 12.85,
    bottom: 81.61,
    right: 17.85,
  },
  mayotte: {
    top: 88.61,
    left: 17.08,
    bottom: 98.68,
    right: 26.19,
  },
  saintBarthelemy: {
    top: 74.95,
    left: 44.81,
    bottom: 82.74,
    right: 57.58,
  },
  saintMartin: {
    top: 74.78,
    left: 23.12,
    bottom: 82.92,
    right: 36.08,
  },
  wallisEtFutuna: {
    top: 74.95,
    left: 0,
    bottom: 79.50,
    right: 7.58,
  },
  polynesieFrancaise: {
    top: 90.19,
    left: 85.12,
    bottom: 97.02,
    right: 100,
  },
  nouvelleCaledonie: {
    top: 73.73,
    left: 66.21,
    bottom: 83.80,
    right: 81.09,
  },
};

const projectsIcons = document.querySelectorAll('#projects_icons > svg');
for (let icon of projectsIcons) {
  icon.addEventListener('mouseenter', function() {
    console.log("mouse over");
    displayPopup(icon);
  });
  icon.addEventListener('mouseleave', function() {
    console.log("mouse out");

    hidePopup();
  });
}

function placeProjectsIcons(projectsIcons) {
  const container = document.querySelector('#map_base');
  const containerWidth = container.getBoundingClientRect().width;
  const containerHeight = container.getBoundingClientRect().height;

  projectsIcons.forEach(icon => {
    const iconWidth = icon.getBoundingClientRect().width;
    const lat = parseFloat(icon.dataset.geofieldlat);
    const lon = parseFloat(icon.dataset.geofieldlon);

    const territory = findTerritory(lat, lon);

    if (territory && localisationMapPlacements[territory]) {
      const territoryBounds = localisationMapPlacements[territory];
      const territoryCoords = franceCoordinates[territory];

      const xPercentage = ((lon - territoryCoords.lonLeft) / (territoryCoords.lonRight - territoryCoords.lonLeft)) * 100;
      const yPercentage = ((territoryCoords.latTop - lat) / (territoryCoords.latTop - territoryCoords.latBottom)) * 100;

      const finalX = containerWidth * (territoryBounds.left / 100 + (xPercentage / 100) * (territoryBounds.right - territoryBounds.left) / 100) - iconWidth / 2;
      const finalY = containerHeight * (territoryBounds.top / 100 + (yPercentage / 100) * (territoryBounds.bottom - territoryBounds.top) / 100) - iconWidth / 2;

      icon.setAttribute('transform', `translate(${finalX}, ${finalY})`);
    } else {
      console.warn(`Territory not found for lat: ${lat}, lon: ${lon}`);
    }
  });
}

function findTerritory(lat, lon) {
  for (const [territory, coords] of Object.entries(franceCoordinates)) {
    if (
      lat <= Math.max(coords.latTop, coords.latBottom) &&
      lat >= Math.min(coords.latTop, coords.latBottom) &&
      lon >= Math.min(coords.lonLeft, coords.lonRight) &&
      lon <= Math.max(coords.lonLeft, coords.lonRight)
    ) {
      return territory;
    }
  }
  return "Unknown territory";
}

function displayPopup(icon) {
  const container = document.querySelector('#sites-map-container');

  const x = icon.getBoundingClientRect().left - container.getBoundingClientRect().left;
  const y = icon.getBoundingClientRect().top - container.getBoundingClientRect().top;

  const popup = document.querySelector('#sites-map-container #popup');

  popup.querySelector('h3').innerText = icon.dataset.title;
  popup.querySelector('p').innerText = icon.dataset.place;


  popup.style.top = 0;
  popup.style.left = 0;

  popup.style.display = 'block';

  popup.style.left = `${x - popup.getBoundingClientRect().width / 2 + icon.getBoundingClientRect().width / 2}px`;
  popup.style.top = `${y - popup.getBoundingClientRect().height - icon.getBoundingClientRect().height}px`;
  setTimeout(() => {
    popup.style.opacity = 1;
  }, 10);
}

function hidePopup(){
  const popup = document.querySelector('#sites-map-container #popup');

  popup.style.opacity = 0;
  setTimeout(() => {
    popup.style.display = 'none';
  }, 300);
}

placeProjectsIcons(projectsIcons);

window.addEventListener('resize', placeProjectsIcons(projectsIcons));