custom map draft

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

@@ -0,0 +1,98 @@
+@font-face {
+  font-family: 'gilroy-semibold';
+  src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
+}
+#sites-map-container {
+  background-color: transparent;
+  text-align: center;
+  position: relative;
+  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 */
+  @media (max-width: 810px) {
+    width: 80%;  /* Prend toute la largeur du conteneur parent */
+  }
+  @media (max-width: 530px) {
+    width: 100%;  /* Prend toute la largeur du conteneur parent */
+    height: 485px; 
+  }
+  @media (max-width: 400px) {
+    width: 100%;  /* Prend toute la largeur du conteneur parent */
+    height: 430px; 
+  }
+}
+
+
+
+/* Changer la couleur au survol (hover) */
+#sites-map-container .site-link:hover{
+  cursor: pointer;
+}
+
+
+/* Styles du popup (caché par défaut) */
+#sites-map-container #popup {
+  font-family: 'gilroy-light';
+  display: none;
+  position: absolute;
+  z-index: 1000;
+  text-align: left;
+  padding-left: 1rem;
+  pointer-events: none;
+  @media (max-width: 1090px) {
+    bottom: 20px;
+  }
+
+}
+
+/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
+@media (min-width: 1090px) {
+  #sites-map-container #popup {
+    top: 50%; /* Centrer verticalement */
+    left: 80%; /* Placer le popup à droite de la carte */
+    transform: translateY(-50%); /* Ajuster pour centrer verticalement */
+    width: 300px;
+  }
+}
+
+
+#sites-map-container strong{
+  color: #f7002b;
+  font-family: 'gilroy-bold';
+}
+#sites-map-container a{
+  display: none;
+  align-items: center;
+  color: white;
+  background: black;
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  padding-left: 0.5rem;
+  text-decoration: none;
+  margin-top: 0.7rem;
+  height: 1.3rem;
+}
+#sites-map-container a:after{
+        display: inline-flex;
+        content: url("../img/noun-arrow-to-right.svg");
+        padding-right: 0.2rem;
+        padding-left: 0.2rem;
+        
+}
+
+#popup-content{
+  width: 300px;
+  padding-right: 30px;
+
+  p{
+    font-size: 0.7rem;
+  }
+  @media (max-width : 810px) {
+    width: 300px;
+    background-color: white;
+    border-radius: 5px;
+    padding: 0.5rem; 
+    padding-left: 1rem;
+  }
+}

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

@@ -0,0 +1,116 @@
+// // 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');
+
+// Vérifiez si la page contient la classe '.node-type-site'
+const isSitePage = document.body.classList.contains('node-type-site');
+
+
+// Fonction pour afficher le popup
+function showPopup(content, x, y, isLeftHalf) {
+    // Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
+    if (isSitePage) return;
+
+    popupContent.innerHTML = content;
+
+
+    // Afficher le popup et le fond de modal
+    popup.style.display = 'block';
+    modalBackground.style.display = 'block';
+
+}
+
+// Fonction pour fermer le popup
+function closePopup() {
+    popup.style.display = 'none';
+    modalBackground.style.display = 'none'; // Désactiver le fond modal
+}
+
+// Gérer le survol des cercles (au lieu du clic)
+svgElement.addEventListener('mouseover', function(event) {
+    if (event.target.classList.contains('site-link')) {
+        const content = event.target.getAttribute('data-content');
+
+        // Afficher le popup avec la position et l'alignement adaptés
+        showPopup(content);
+    }
+
+    // Gestion du changement de couleur sur le cercle
+    if (event.target.tagName === 'circle') {
+        event.target.setAttribute('fill', 'red');
+    }
+});
+
+// Fermer le popup lorsque la souris quitte le cercle
+svgElement.addEventListener('mouseout', function(event) {
+    if (event.target.classList.contains('site-link')) {
+        closePopup();
+    }
+
+    // Réinitialiser la couleur du cercle au survol de la souris
+    if (event.target.tagName === 'circle') {
+        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);
+    }
+});
+
+// Gérer le clic ou le toucher des cercles
+function handleCircleClick(content) {
+    showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
+}
+
+// Écouter les événements de clic et de toucher sur le SVG
+svgElement.addEventListener('click', function(event) {
+    if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
+        const content = event.target.getAttribute('data-content');
+        handleCircleClick(content);
+    }
+});
+
+
+///////////////////// page site point rouge  quand sur page ///////////////////////
+
+// Récupérer l'ID de la page depuis la classe du body
+const body = document.querySelector('body');
+const pageId = body.className.match(/node-id-(\d+)/)[1];  // Extraire l'ID de la page
+
+// Sélectionner le groupe SVG qui a l'ID correspondant
+const matchingGroup = document.querySelector(`#site-${pageId}`);
+
+// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
+if (matchingGroup) {
+    const circle = matchingGroup.querySelector('circle');  // Sélectionner le cercle à l'intérieur du groupe
+    if (circle) {
+        circle.setAttribute('fill', 'red');  // Changer la couleur du cercle
+    }
+}
+
+
+