diff --git a/src/components/Map/markerManager.js b/src/components/Map/markerManager.js
index 6480a74..5379b5f 100644
--- a/src/components/Map/markerManager.js
+++ b/src/components/Map/markerManager.js
@@ -1,137 +1,169 @@
import maplibregl from "maplibre-gl";
+/**
+ * Supprime tous les marqueurs
+ */
export function clearAllMarkers(markersRef, expandedElRef) {
if (markersRef.current) {
for (const m of markersRef.current) {
- try { m.marker.remove(); } catch {}
+ try {
+ m.marker.remove();
+ } catch {}
}
}
markersRef.current = [];
if (expandedElRef) expandedElRef.current = null;
}
+function shortText(s, max = 22) {
+ const t = String(s || "").trim();
+ if (!t) return "Post";
+ return t.length > max ? t.slice(0, max - 3) + "..." : t;
+}
+
+/**
+ * Crée un marqueur pour un post :
+ * - compact : bulle + pointe
+ * - expanded : carte + pointe
+ */
export function createMarkerForPost(post, mapRef, markersRef, expandedElRef) {
const map = mapRef.current;
if (!map) return;
const lat =
- typeof post.lat === "number" ? post.lat :
- typeof post.Lat === "number" ? post.Lat :
- typeof post.latitude === "number" ? post.latitude :
- null;
+ typeof post.lat === "number"
+ ? post.lat
+ : typeof post.Lat === "number"
+ ? post.Lat
+ : typeof post.latitude === "number"
+ ? post.latitude
+ : null;
const lon =
- typeof post.lon === "number" ? post.lon :
- typeof post.Lon === "number" ? post.Lon :
- typeof post.longitude === "number" ? post.longitude :
- null;
+ typeof post.lon === "number"
+ ? post.lon
+ : typeof post.Lon === "number"
+ ? post.Lon
+ : typeof post.longitude === "number"
+ ? post.longitude
+ : null;
- if (lat == null || lon == null) {
- console.warn("post sans coordonnée:", post);
- return;
- }
+ if (lat == null || lon == null) return;
const title = (post.title || post.Title || "").trim() || "Untitled";
+ const titleShort = shortText(title, 22);
+
const body =
(post.snippet || post.Snippet || "").trim() ||
(post.body || post.Body || "").trim() ||
title;
const author = (post.author || post.Author || "").trim() || "unknown";
- const created = (post.created_at || post.CreatedAt || "").toString().slice(0, 19);
+ const created =
+ (post.created_at || post.CreatedAt || "").toString().slice(0, 19);
const category = (post.category || post.Category || "").toUpperCase() || "";
const subCat = (post.sub_category || post.SubCategory || "").toString();
const root = document.createElement("div");
- root.className = "post-pin";
+ root.className = "post-pin post-pin--compact";
+ // base z-index (compact)
+ root.style.zIndex = "1";
- const layer = document.createElement("div");
- layer.className = "post-pin-layer";
-
- const compact = document.createElement("div");
- compact.className = "post-pin-compact";
- compact.innerHTML = `
-
- ${escapeHtml(title)}
- `;
-
- const expanded = document.createElement("div");
- expanded.className = "post-pin-expanded post-hidden";
- expanded.innerHTML = `
-