corrections carte interactive

web/modules/custom/erable_mod/assets/css/carte-interactive.css

@@ -14,6 +14,10 @@
   top: 0;
 }
 
+#projects_icons svg {
+  position: absolute;
+}
+
 #popup {
   background-color: white;
   display: none;

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

@@ -1,9 +1,10 @@
 const franceCoordinates = {
+  // https://boundingbox.klokantech.com/
   metropole: {
-    latTop: 52.0, // Nord-Ouest (coin supérieur gauche)
-    lonLeft: -5,
-    latBottom: 40.0, // Sud-Est (coin inférieur droit)
-    lonRight: 11.0,
+    latTop: 51.1, // Nord-Ouest (coin supérieur gauche)
+    lonLeft: -5.15,
+    latBottom: 41.3, // Sud-Est (coin inférieur droit)
+    lonRight: 9.65,
   },
   guadeloupe: {
     latTop: 16.5,
@@ -30,40 +31,46 @@ const franceCoordinates = {
     lonRight: 55.9,
   },
   saintPierreEtMiquelon: {
-    latTop: 47.1,
-    lonLeft: -56.4,
-    latBottom: 46.7,
-    lonRight: -56.1,
+    latTop: 47.15,
+    lonLeft: -56.41,
+    latBottom: 46.74,
+    lonRight: -56.13,
   },
   mayotte: {
-    latTop: -12.6,
-    lonLeft: 44.9,
-    latBottom: -13,
+    latTop: -12.63,
+    lonLeft: 45.01,
+    latBottom: -13.02,
     lonRight: 45.3,
   },
   saintBarthelemy: {
-    latTop: 17.9,
-    lonLeft: -62.9,
-    latBottom: 17.8,
-    lonRight: -62.7,
+    latTop: 17.97,
+    lonLeft: -62.94,
+    latBottom: 17.87,
+    lonRight: -62.78,
   },
   saintMartin: {
-    latTop: 18.1,
-    lonLeft: -63.1,
-    latBottom: 17.9,
-    lonRight: -62.9,
+    latTop: 18.12,
+    lonLeft: -63.15,
+    latBottom: 18,
+    lonRight: -62.97,
   },
-  wallisEtFutuna: {
-    latTop: -13.1,
-    lonLeft: -176.2,
-    latBottom: -13.3,
-    lonRight: -176.1,
+  futuna: {
+    latTop: -14.23,
+    lonLeft: -178.18,
+    latBottom: -14.36,
+    lonRight: -177.99,
+  },
+  wallis: {
+    latTop: -13.21,
+    lonLeft: -176.25,
+    latBottom: -13.39,
+    lonRight: -176.15,
   },
   polynesieFrancaise: {
-    latTop: -17.4,
-    lonLeft: -149.9,
-    latBottom: -17.1,
-    lonRight: -149,
+    latTop: -17.47,
+    lonLeft: -149.91,
+    latBottom: -17.89,
+    lonRight: -149.12,
   },
   nouvelleCaledonie: {
     latTop: -19.3,
@@ -82,61 +89,67 @@ const localisationMapPlacements = {
     right: 87.14,
   },
   guadeloupe: {
-    top: 88.44,
+    top: 87.8,
     left: 33.01,
     bottom: 98.77,
     right: 46.25,
   },
   martinique: {
-    top: 88.96,
+    top: 88.3,
     left: 53.26,
     bottom: 98.24,
     right: 61.99,
   },
   guyanne: {
-    top: 88.09,
+    top: 87.5,
     left: 69.09,
     bottom: 99.21,
     right: 79.07,
   },
   reunion: {
-    top: 75.48,
-    left: 89.82,
+    top: 75,
+    left: 89.6,
     bottom: 82.04,
     right: 97.88,
   },
   saintPierreEtMiquelon: {
-    top: 75.03,
-    left: 12.85,
-    bottom: 81.61,
-    right: 17.85,
+    top: 86,
+    left: 2,
+    bottom: 99.6,
+    right: 9,
   },
   mayotte: {
-    top: 88.61,
+    top: 88,
     left: 17.08,
     bottom: 98.68,
     right: 26.19,
   },
   saintBarthelemy: {
-    top: 74.95,
+    top: 74.5,
     left: 44.81,
     bottom: 82.74,
     right: 57.58,
   },
   saintMartin: {
-    top: 74.78,
+    top: 74.2,
     left: 23.12,
     bottom: 82.92,
     right: 36.08,
   },
-  wallisEtFutuna: {
-    top: 74.95,
+  futuna: {
+    top: 74.2,
     left: 0,
-    bottom: 79.50,
-    right: 7.58,
+    bottom: 79,
+    right: 7.5,
+  },
+  wallis: {
+    top: 75.8,
+    left: 9.1,
+    bottom: 82,
+    right: 13,
   },
   polynesieFrancaise: {
-    top: 90.19,
+    top: 89.5,
     left: 85.12,
     bottom: 97.02,
     right: 100,
@@ -152,12 +165,9 @@ const localisationMapPlacements = {
 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();
   });
 }
@@ -169,11 +179,16 @@ function placeProjectsIcons(projectsIcons) {
 
   projectsIcons.forEach(icon => {
     const iconWidth = icon.getBoundingClientRect().width;
-    const lat = parseFloat(icon.dataset.geofieldlat);
-    const lon = parseFloat(icon.dataset.geofieldlon);
+    let lat = parseFloat(icon.dataset.geofieldlat);
+    let lon = parseFloat(icon.dataset.geofieldlon);
+    if (lat > 180) lat = lat - 360;
+    if (lon > 180) lon = lon - 360;
 
     const territory = findTerritory(lat, lon);
 
+    console.log(icon.dataset.title, territory);
+
+
     if (territory && localisationMapPlacements[territory]) {
       const territoryBounds = localisationMapPlacements[territory];
       const territoryCoords = franceCoordinates[territory];
@@ -193,6 +208,8 @@ function placeProjectsIcons(projectsIcons) {
 
 function findTerritory(lat, lon) {
   for (const [territory, coords] of Object.entries(franceCoordinates)) {
+    if (lat > 180) lat = lat - 360;
+    if (lon > 180) lon = lon - 360;
     if (
       lat <= Math.max(coords.latTop, coords.latBottom) &&
       lat >= Math.min(coords.latTop, coords.latBottom) &&
@@ -205,6 +222,8 @@ function findTerritory(lat, lon) {
   return "Unknown territory";
 }
 
+let isPopupVisible = false;
+
 function displayPopup(icon) {
   const container = document.querySelector('#sites-map-container');
 
@@ -216,7 +235,6 @@ function displayPopup(icon) {
   popup.querySelector('h3').innerText = icon.dataset.title;
   popup.querySelector('p').innerText = icon.dataset.place;
 
-
   popup.style.top = 0;
   popup.style.left = 0;
 
@@ -227,6 +245,8 @@ function displayPopup(icon) {
   setTimeout(() => {
     popup.style.opacity = 1;
   }, 10);
+
+  isPopupVisible = true;
 }
 
 function hidePopup(){
@@ -234,10 +254,30 @@ function hidePopup(){
 
   popup.style.opacity = 0;
   setTimeout(() => {
-    popup.style.display = 'none';
+    if (!isPopupVisible) popup.style.display = 'none';
+    isPopupVisible = false;
   }, 300);
 }
 
 placeProjectsIcons(projectsIcons);
+// debugMapPlacement();
 
 window.addEventListener('resize', placeProjectsIcons(projectsIcons));
+
+function debugMapPlacement() {
+  const container = document.querySelector('#sites-map-container');
+
+  for (let territory of Object.keys(localisationMapPlacements)) {
+    const debugDiv = document.createElement('div');
+    debugDiv.style.position = 'absolute';
+    debugDiv.innerText = territory;
+    debugDiv.style.fontSize = '10px';
+    debugDiv.style.top = localisationMapPlacements[territory].top + '%';
+    debugDiv.style.left = localisationMapPlacements[territory].left + '%';
+    debugDiv.style.width = (localisationMapPlacements[territory].right - localisationMapPlacements[territory].left) + '%';
+    debugDiv.style.height = (localisationMapPlacements[territory].bottom - localisationMapPlacements[territory].top) + '%';
+    debugDiv.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
+    debugDiv.style.pointerEvents = 'none';
+    container.appendChild(debugDiv);
+  }
+}