taille path

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

@@ -3,7 +3,7 @@
   src: url('fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
 }
 #sites-map-container {
-  background-color: #c3cef2;
+  background-color: #cecfcc;
   text-align: center;
 }
 /* #sites-map-container .circle {

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

@@ -1,22 +1,19 @@
-// Sélection des éléments au préalable pour éviter de les rechercher plusieurs fois
+// Sélection des éléments principaux
 const svgElement = document.querySelector('#sites-map-container svg');
 const popup = document.querySelector('#sites-map-container #popup');
 const popupContent = document.querySelector('#sites-map-container #popup-content');
 const modalBackground = document.querySelector('#sites-map-container #modal-background');
-console.log('svgElement', svgElement);
 
 // Fonction pour afficher le popup
 function showPopup(content, x, y) {
-    console.log('showPopup', content, x, y);
-    
     popupContent.innerHTML = content;
 
     // Récupérer la position de l'élément SVG seulement une fois
     const rect = svgElement.getBoundingClientRect();
-
-    // Calculer la position du popup par rapport à l'élément SVG
-    const popupX = rect.left + x + 120; // Décalage de 120px à droite
-    const popupY = rect.top + y + 20;  // Décalage de 20px en dessous
+    
+    // Calcul de la position du popup
+    let popupX = rect.left + x + 120;
+    let popupY = rect.top + y + 20;
 
     // Dimensions de la fenêtre et du popup
     const viewportWidth = window.innerWidth;
@@ -24,32 +21,20 @@ function showPopup(content, x, y) {
     const popupWidth = popup.offsetWidth;
     const popupHeight = popup.offsetHeight;
 
-    // Vérification des bordures droite et gauche
-    if (popupX + popupWidth > viewportWidth) {
-        popupX = viewportWidth - popupWidth - 10; // Ajuster pour qu'il ne dépasse pas à droite
-    }
-    if (popupX < 0) {
-        popupX = 10; // S'assurer que le popup ne dépasse pas à gauche
-    }
-
-    // Vérification des bordures inférieure et supérieure
-    if (popupY + popupHeight > viewportHeight) {
-        popupY = viewportHeight - popupHeight - 10; // Ajuster pour qu'il ne dépasse pas en bas
-    }
-    if (popupY < 0) {
-        popupY = 10; // S'assurer que le popup ne dépasse pas en haut
-    }
+    // Ajuster les positions pour éviter les dépassements
+    popupX = Math.max(10, Math.min(popupX, viewportWidth - popupWidth - 10));
+    popupY = Math.max(10, Math.min(popupY, viewportHeight - popupHeight - 10));
 
+    // Affichage du popup et du fond modal
     popup.style.left = `${popupX}px`;
     popup.style.top = `${popupY}px`;
     popup.style.display = 'block';
-    modalBackground.style.display = 'block'; // Activer le fond modal si nécessaire
+    modalBackground.style.display = 'block';
 }
 
 // Recalculer la position du popup lors du redimensionnement de la fenêtre
 window.addEventListener('resize', function() {
     if (popup.style.display === 'block') {
-        // Recalculer les coordonnées et ajuster la position
         const currentPopupRect = popup.getBoundingClientRect();
         showPopup(popupContent.innerHTML, currentPopupRect.left, currentPopupRect.top);
     }
@@ -61,31 +46,24 @@ function closePopup() {
     modalBackground.style.display = 'none'; // Désactiver le fond modal
 }
 
-// Ajout d'un écouteur d'événement sur l'élément SVG pour tous les cercles
+// Délégation d'événement pour gérer les clics sur les cercles et paths
 svgElement.addEventListener('click', function(event) {
-    console.log('svgElement click', event.target);
-    
+    // Gérer le clic sur les cercles associés aux points d'intérêt
     if (event.target.classList.contains('site-link')) {
-        // Récupérer le contenu personnalisé de l'attribut data-content
         const content = event.target.getAttribute('data-content');
-
-        // Récupérer la position du cercle cliqué par rapport à l'élément SVG
         const rect = svgElement.getBoundingClientRect();
         const circleX = event.clientX - rect.left;
         const circleY = event.clientY - rect.top;
-
-        // Afficher le popup avec le contenu spécifique
         showPopup(content, circleX, circleY);
-
-        // Empêcher la propagation de l'événement pour éviter la fermeture immédiate
-        event.stopPropagation();
+        event.stopPropagation(); // Empêche la propagation de l'événement pour éviter une fermeture accidentelle
     }
 });
 
-// Ferme le popup quand on clique n'importe où sur la page, sauf sur le popup
+// Fermer le popup en cliquant à l'extérieur de celui-ci
 document.addEventListener('click', function(event) {
-    // Vérifier si le clic s'est produit en dehors du popup
     if (popup.style.display === 'block' && !popup.contains(event.target)) {
         closePopup();
     }
 });
+
+

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

@@ -56,8 +56,8 @@ class SitesMap extends BlockBase {
       $y = round(($latTop - $lat) / ($latTop - $latBottom) * $vp_h);
 
       $r = 10;
-      $m = -$r+2;
-      $l = $r*2-4;
+      $m = -$r+4;
+      $l = $r*2-8;
       $sites_paths .= <<<SVGSITEPATH
       <g 
         id="site-$index"