Auto deploy: 2025-12-09 06:11:18

src/components/Map/markerManager.js

@@ -1,7 +1,7 @@
 import maplibregl from "maplibre-gl";
 
 /**
- * Supprime tous les marqueurs de la carte
+ * Retire tous les marqueurs existants
  */
 export function clearAllMarkers(markersRef, expandedElRef) {
   if (markersRef.current) {
@@ -20,16 +20,14 @@ export function clearAllMarkers(markersRef, expandedElRef) {
 }
 
 /**
- * Crée un DOM marker pour un post et l'ancre sur sa coordonnée.
+ * Crée un marqueur "pin" avec bulle + pointe.
- * - mapRef : ref vers la map MapLibre
+ * Position verrouillée sur [lon, lat] via MapLibre (anchor: 'bottom').
- * - markersRef : ref vers la liste [{ id, marker, el, post }]
- * - expandedElRef : ref vers l'élément DOM du post actuellement "grand"
  */
 export function createMarkerForPost(post, mapRef, markersRef, expandedElRef) {
   const map = mapRef.current;
   if (!map) return;
 
-  // Récupère les coords (lat/lon / Lat/Lon / latitude/longitude)
+  // --- Coordonnées ---
   const lat =
     typeof post.lat === "number"
       ? post.lat
@@ -49,122 +47,68 @@ export function createMarkerForPost(post, mapRef, markersRef, expandedElRef) {
       : null;
 
   if (lat == null || lon == null) {
-    console.warn("Post sans coordonnée valide:", post);
+    console.warn("post sans coordonnée:", post);
     return;
   }
 
-  // Petit texte (on garde court)
   const title = (post.title || post.Title || "").trim() || "Untitled";
   const snippet =
     (post.snippet || post.Snippet || "").trim() ||
     (post.body || post.Body || "").trim() ||
     title;
 
-  // ELEMENT DOM DU MARKER
+  // --- DOM du pin ---
   const root = document.createElement("div");
-  root.className = "post-marker post-marker-compact";
+  root.className = "post-pin";
 
-  const inner = document.createElement("div");
+  const bubble = document.createElement("div");
-  inner.className = "marker-inner";
+  bubble.className = "post-pin-bubble";
 
   const dot = document.createElement("div");
-  dot.className = "marker-dot";
+  dot.className = "post-pin-dot";
 
   const text = document.createElement("div");
-  text.className = "marker-text";
+  text.className = "post-pin-text";
   text.textContent = title;
 
-  inner.appendChild(dot);
+  bubble.appendChild(dot);
-  inner.appendChild(text);
+  bubble.appendChild(text);
-  root.appendChild(inner);
 
-  // Marker MapLibre -> POSITION = [lon, lat] SANS OFFSET
+  const pointer = document.createElement("div");
+  pointer.className = "post-pin-pointer";
+
+  root.appendChild(bubble);
+  root.appendChild(pointer);
+
+  // --- Marker MapLibre : position = [lon, lat], ancré en bas ---
   const marker = new maplibregl.Marker({
     element: root,
-    anchor: "bottom", // le bas du marker pointe sur la coordonnée
+    anchor: "bottom", // la pointe touche la coordonnée
   })
     .setLngLat([lon, lat])
     .addTo(map);
 
-  // Sauvegarde pour pouvoir les nettoyer
   const entry = { id: post.id, marker, el: root, post };
   markersRef.current.push(entry);
 
-  // Quand on clique -> on ouvre le gros post par-dessus, mais à la même coordonnée
+  // --- Gestion du mode "agrandi" ---
   root.addEventListener("click", (ev) => {
     ev.stopPropagation();
 
-    // Fermer le précédent gros post
+    // Fermer l'ancien agrandi
     if (expandedElRef.current && expandedElRef.current !== root) {
-      collapseMarkerElement(expandedElRef.current);
+      expandedElRef.current.classList.remove("post-pin-expanded");
     }
 
-    // Toggle compact/expanded sur ce marker
+    // Toggle sur ce pin
-    if (root.classList.contains("post-marker-expanded")) {
+    const isExpanded = root.classList.toggle("post-pin-expanded");
-      collapseMarkerElement(root);
+    expandedElRef.current = isExpanded ? root : null;
-      expandedElRef.current = null;
+
+    // Mettre à jour le texte (plus long si agrandi)
+    if (isExpanded) {
+      text.textContent = snippet;
     } else {
-      expandMarkerElement(root, { title, snippet });
+      text.textContent = title;
-      expandedElRef.current = root;
     }
   });
 }
-
-/**
- * Passe un marker en mode "grand post"
- */
-function expandMarkerElement(root, { title, snippet }) {
-  root.classList.remove("post-marker-compact");
-  root.classList.add("post-marker-expanded");
-
-  // Nettoie l'intérieur et reconstruit
-  root.innerHTML = "";
-
-  const container = document.createElement("div");
-  container.className = "marker-expanded-inner";
-
-  const header = document.createElement("div");
-  header.className = "marker-expanded-header";
-
-  const dot = document.createElement("div");
-  dot.className = "marker-dot";
-
-  const titleEl = document.createElement("div");
-  titleEl.className = "marker-expanded-title";
-  titleEl.textContent = title;
-
-  header.appendChild(dot);
-  header.appendChild(titleEl);
-
-  const bodyEl = document.createElement("div");
-  bodyEl.className = "marker-expanded-body";
-  bodyEl.textContent = snippet;
-
-  container.appendChild(header);
-  container.appendChild(bodyEl);
-
-  root.appendChild(container);
-}
-
-/**
- * Repasse un marker en mode petit post
- */
-function collapseMarkerElement(root) {
-  root.classList.remove("post-marker-expanded");
-  root.classList.add("post-marker-compact");
-  root.innerHTML = "";
-
-  const inner = document.createElement("div");
-  inner.className = "marker-inner";
-
-  const dot = document.createElement("div");
-  dot.className = "marker-dot";
-
-  const text = document.createElement("div");
-  text.className = "marker-text";
-  text.textContent = "…";
-
-  inner.appendChild(dot);
-  inner.appendChild(text);
-  root.appendChild(inner);
-}