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);
+    }
+});

web/modules/custom/q2d_mod/src/Plugin/Block/SitesMap.php

@@ -51,6 +51,7 @@ class SitesMap extends BlockBase {
       $geofield = $site->get('field_geofield')->get(0);
       $lon = $geofield->lon;
       $lat = $geofield->lat;
+      $geofieldData = "$lon,$lat"; // Utiliser une chaîne pour stocker la position
 
       $x = round(($lon - $lonLeft) / ($lonRight - $lonLeft) * $vp_w);
       $y = round(($latTop - $lat) / ($latTop - $latBottom) * $vp_h);
@@ -61,6 +62,7 @@ class SitesMap extends BlockBase {
       $sites_paths .= <<<SVGSITEPATH
       <g 
         id="site-$index"
+        data-geofield="$geofieldData"
         transform="
           translate($x,$y)">
           <circle

web/modules/custom/q2d_mod/templates/svg-mapsites.html.twig

@@ -3,9 +3,9 @@
     <path {{ path_attributes }}></path>
   </svg> #}
   <svg
-      width="{{ vpw }}"
-      height="{{ vph }}"
-      viewBox="0 0 100% {{vp_h}}"
+      width="100%"
+      height="auto"
+      viewBox="0 0 {{ vpw }} {{ vph }}"
       version="1.1"
       id="svg1"
       xmlns="http://www.w3.org/2000/svg"

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -3065,8 +3065,10 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
   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 */
 }
 
 /* Changer la couleur au survol (hover) */