map responsive

web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss

@@ -6,8 +6,10 @@
   background-color: #cecfcc;
   text-align: center;
   position: relative;
-  height: 600px;
-  width: auto;
+  width: 100%;  /* Prend toute la largeur du conteneur parent */
+  max-width: 800px; /* Optionnel : Limiter la largeur maximale */
+  margin: 0 auto; /* Centrer le conteneur */
+  height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
 }
 
 

web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js

@@ -138,3 +138,29 @@ svgElement.addEventListener('mouseout', function(event) {
         event.target.setAttribute('fill', 'black'); // Remettre en noir
     }
 });
+
+
+// Mettre à jour la logique de calcul des positions
+function recalculateSitePositions() {
+    const allSites = document.querySelectorAll('.site-link');
+
+    allSites.forEach((site, index) => {
+        const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
+        const lon = parseFloat(geofield.split(',')[0]);
+        const lat = parseFloat(geofield.split(',')[1]);
+
+        const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
+        const y = round((latTop - lat) / (latTop - latBottom) * vp_h);
+
+        site.setAttribute('transform', `translate(${x}, ${y})`);
+    });
+}
+
+window.addEventListener('resize', function() {
+    recalculateSitePositions();
+    if (popup.style.display === 'block') {
+        const currentPopupRect = popup.getBoundingClientRect();
+        const rect = svgElement.getBoundingClientRect();
+        showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
+    }
+});