map zone interactive plus grande

This commit is contained in:
ouidade 2024-10-08 15:21:09 +02:00
parent 32221214bb
commit 4c3717df81
2 changed files with 18 additions and 2 deletions

View File

@ -164,3 +164,16 @@ window.addEventListener('resize', function() {
showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top); 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);
}
});

View File

@ -63,8 +63,11 @@ class SitesMap extends BlockBase {
<g <g
id="site-$index" id="site-$index"
data-geofield="$geofieldData" data-geofield="$geofieldData"
transform=" transform="translate($x,$y)"
translate($x,$y)"> style="cursor: pointer;" <!-- Change le curseur pour indiquer l'interaction -->
>
<rect width="40" height="40" fill="transparent" onclick="handleCircleClick('$datacontent')"></rect> <!-- Zone d'interaction invisible -->
<circle <circle
class="site-link" class="site-link"
data-content="$datacontent" data-content="$datacontent"