diff --git a/web/modules/custom/erable_mod/assets/css/carte-interactive.css b/web/modules/custom/erable_mod/assets/css/carte-interactive.css
index 915eee9..b4736ec 100644
--- a/web/modules/custom/erable_mod/assets/css/carte-interactive.css
+++ b/web/modules/custom/erable_mod/assets/css/carte-interactive.css
@@ -14,6 +14,10 @@
top: 0;
}
+#projects_icons svg {
+ position: absolute;
+}
+
#popup {
background-color: white;
display: none;
diff --git a/web/modules/custom/erable_mod/assets/js/carte-interactive.js b/web/modules/custom/erable_mod/assets/js/carte-interactive.js
index 40d463b..cfc6ba0 100644
--- a/web/modules/custom/erable_mod/assets/js/carte-interactive.js
+++ b/web/modules/custom/erable_mod/assets/js/carte-interactive.js
@@ -1,9 +1,10 @@
const franceCoordinates = {
+ // https://boundingbox.klokantech.com/
metropole: {
- latTop: 52.0, // Nord-Ouest (coin supérieur gauche)
- lonLeft: -5,
- latBottom: 40.0, // Sud-Est (coin inférieur droit)
- lonRight: 11.0,
+ latTop: 51.1, // Nord-Ouest (coin supérieur gauche)
+ lonLeft: -5.15,
+ latBottom: 41.3, // Sud-Est (coin inférieur droit)
+ lonRight: 9.65,
},
guadeloupe: {
latTop: 16.5,
@@ -30,40 +31,46 @@ const franceCoordinates = {
lonRight: 55.9,
},
saintPierreEtMiquelon: {
- latTop: 47.1,
- lonLeft: -56.4,
- latBottom: 46.7,
- lonRight: -56.1,
+ latTop: 47.15,
+ lonLeft: -56.41,
+ latBottom: 46.74,
+ lonRight: -56.13,
},
mayotte: {
- latTop: -12.6,
- lonLeft: 44.9,
- latBottom: -13,
+ latTop: -12.63,
+ lonLeft: 45.01,
+ latBottom: -13.02,
lonRight: 45.3,
},
saintBarthelemy: {
- latTop: 17.9,
- lonLeft: -62.9,
- latBottom: 17.8,
- lonRight: -62.7,
+ latTop: 17.97,
+ lonLeft: -62.94,
+ latBottom: 17.87,
+ lonRight: -62.78,
},
saintMartin: {
- latTop: 18.1,
- lonLeft: -63.1,
- latBottom: 17.9,
- lonRight: -62.9,
+ latTop: 18.12,
+ lonLeft: -63.15,
+ latBottom: 18,
+ lonRight: -62.97,
},
- wallisEtFutuna: {
- latTop: -13.1,
- lonLeft: -176.2,
- latBottom: -13.3,
- lonRight: -176.1,
+ futuna: {
+ latTop: -14.23,
+ lonLeft: -178.18,
+ latBottom: -14.36,
+ lonRight: -177.99,
+ },
+ wallis: {
+ latTop: -13.21,
+ lonLeft: -176.25,
+ latBottom: -13.39,
+ lonRight: -176.15,
},
polynesieFrancaise: {
- latTop: -17.4,
- lonLeft: -149.9,
- latBottom: -17.1,
- lonRight: -149,
+ latTop: -17.47,
+ lonLeft: -149.91,
+ latBottom: -17.89,
+ lonRight: -149.12,
},
nouvelleCaledonie: {
latTop: -19.3,
@@ -82,61 +89,67 @@ const localisationMapPlacements = {
right: 87.14,
},
guadeloupe: {
- top: 88.44,
+ top: 87.8,
left: 33.01,
bottom: 98.77,
right: 46.25,
},
martinique: {
- top: 88.96,
+ top: 88.3,
left: 53.26,
bottom: 98.24,
right: 61.99,
},
guyanne: {
- top: 88.09,
+ top: 87.5,
left: 69.09,
bottom: 99.21,
right: 79.07,
},
reunion: {
- top: 75.48,
- left: 89.82,
+ top: 75,
+ left: 89.6,
bottom: 82.04,
right: 97.88,
},
saintPierreEtMiquelon: {
- top: 75.03,
- left: 12.85,
- bottom: 81.61,
- right: 17.85,
+ top: 86,
+ left: 2,
+ bottom: 99.6,
+ right: 9,
},
mayotte: {
- top: 88.61,
+ top: 88,
left: 17.08,
bottom: 98.68,
right: 26.19,
},
saintBarthelemy: {
- top: 74.95,
+ top: 74.5,
left: 44.81,
bottom: 82.74,
right: 57.58,
},
saintMartin: {
- top: 74.78,
+ top: 74.2,
left: 23.12,
bottom: 82.92,
right: 36.08,
},
- wallisEtFutuna: {
- top: 74.95,
+ futuna: {
+ top: 74.2,
left: 0,
- bottom: 79.50,
- right: 7.58,
+ bottom: 79,
+ right: 7.5,
+ },
+ wallis: {
+ top: 75.8,
+ left: 9.1,
+ bottom: 82,
+ right: 13,
},
polynesieFrancaise: {
- top: 90.19,
+ top: 89.5,
left: 85.12,
bottom: 97.02,
right: 100,
@@ -152,12 +165,9 @@ const localisationMapPlacements = {
const projectsIcons = document.querySelectorAll('#projects_icons > svg');
for (let icon of projectsIcons) {
icon.addEventListener('mouseenter', function() {
- console.log("mouse over");
displayPopup(icon);
});
icon.addEventListener('mouseleave', function() {
- console.log("mouse out");
-
hidePopup();
});
}
@@ -169,11 +179,16 @@ function placeProjectsIcons(projectsIcons) {
projectsIcons.forEach(icon => {
const iconWidth = icon.getBoundingClientRect().width;
- const lat = parseFloat(icon.dataset.geofieldlat);
- const lon = parseFloat(icon.dataset.geofieldlon);
+ let lat = parseFloat(icon.dataset.geofieldlat);
+ let lon = parseFloat(icon.dataset.geofieldlon);
+ if (lat > 180) lat = lat - 360;
+ if (lon > 180) lon = lon - 360;
const territory = findTerritory(lat, lon);
+ console.log(icon.dataset.title, territory);
+
+
if (territory && localisationMapPlacements[territory]) {
const territoryBounds = localisationMapPlacements[territory];
const territoryCoords = franceCoordinates[territory];
@@ -193,6 +208,8 @@ function placeProjectsIcons(projectsIcons) {
function findTerritory(lat, lon) {
for (const [territory, coords] of Object.entries(franceCoordinates)) {
+ if (lat > 180) lat = lat - 360;
+ if (lon > 180) lon = lon - 360;
if (
lat <= Math.max(coords.latTop, coords.latBottom) &&
lat >= Math.min(coords.latTop, coords.latBottom) &&
@@ -205,6 +222,8 @@ function findTerritory(lat, lon) {
return "Unknown territory";
}
+let isPopupVisible = false;
+
function displayPopup(icon) {
const container = document.querySelector('#sites-map-container');
@@ -216,7 +235,6 @@ function displayPopup(icon) {
popup.querySelector('h3').innerText = icon.dataset.title;
popup.querySelector('p').innerText = icon.dataset.place;
-
popup.style.top = 0;
popup.style.left = 0;
@@ -227,6 +245,8 @@ function displayPopup(icon) {
setTimeout(() => {
popup.style.opacity = 1;
}, 10);
+
+ isPopupVisible = true;
}
function hidePopup(){
@@ -234,10 +254,30 @@ function hidePopup(){
popup.style.opacity = 0;
setTimeout(() => {
- popup.style.display = 'none';
+ if (!isPopupVisible) popup.style.display = 'none';
+ isPopupVisible = false;
}, 300);
}
placeProjectsIcons(projectsIcons);
+// debugMapPlacement();
window.addEventListener('resize', placeProjectsIcons(projectsIcons));
+
+function debugMapPlacement() {
+ const container = document.querySelector('#sites-map-container');
+
+ for (let territory of Object.keys(localisationMapPlacements)) {
+ const debugDiv = document.createElement('div');
+ debugDiv.style.position = 'absolute';
+ debugDiv.innerText = territory;
+ debugDiv.style.fontSize = '10px';
+ debugDiv.style.top = localisationMapPlacements[territory].top + '%';
+ debugDiv.style.left = localisationMapPlacements[territory].left + '%';
+ debugDiv.style.width = (localisationMapPlacements[territory].right - localisationMapPlacements[territory].left) + '%';
+ debugDiv.style.height = (localisationMapPlacements[territory].bottom - localisationMapPlacements[territory].top) + '%';
+ debugDiv.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
+ debugDiv.style.pointerEvents = 'none';
+ container.appendChild(debugDiv);
+ }
+}
diff --git a/web/modules/custom/erable_mod/assets/svg/carte.svg b/web/modules/custom/erable_mod/assets/svg/carte.svg
index c50eb09..5ee852a 100644
--- a/web/modules/custom/erable_mod/assets/svg/carte.svg
+++ b/web/modules/custom/erable_mod/assets/svg/carte.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file