diff --git a/src/components/Map/markerManager.js b/src/components/Map/markerManager.js
index 8b8c1a1..e974930 100644
--- a/src/components/Map/markerManager.js
+++ b/src/components/Map/markerManager.js
@@ -7,6 +7,12 @@ import { cardTokens } from "../../theme/cardTokens";
import { getTemplateSpecForPost, adaptPostToTemplateData } from "./templateSpecs";
export function clearAllMarkers(markersRef, expandedElRef) {
+ // close overlay if any
+ try {
+ const el = expandedElRef?.current;
+ if (el && el.__swClose) el.__swClose();
+ } catch {}
+
if (markersRef.current) {
for (const m of markersRef.current) {
try {
@@ -46,9 +52,11 @@ export function applyOcclusionForExpanded(markersRef, expandedEl) {
const list = markersRef.current || [];
for (const item of list) {
const el = item?.el;
- if (!el || el === expandedEl) continue;
+ if (!el) continue;
const r = el.getBoundingClientRect();
+
+ // Only hide markers that are below/behind the expanded card
const isBelow = r.top >= raw.top;
if (!isBelow) {
el.style.visibility = "visible";
@@ -83,7 +91,9 @@ function mountCard(container, spec, data, theme) {
themeTokens: tokens,
onAction: (action, value) => {
if (action?.type === "open_url" && value) {
- try { window.open(value, "_blank"); } catch {}
+ try {
+ window.open(value, "_blank");
+ } catch {}
}
},
className: "",
@@ -91,33 +101,169 @@ function mountCard(container, spec, data, theme) {
);
return () => {
- try { root.unmount(); } catch {}
+ try {
+ root.unmount();
+ } catch {}
};
}
+function escapeHtml(str) {
+ return String(str ?? "")
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """);
+}
+
/**
- * Force the marker anchor to be displayed at:
- * - X: centered (50% width)
- * - Y: 6/7 of map height (so the popup sits "1/7 from bottom")
+ * Overlay: fixed card at the bottom + pointer that follows the marker.
+ * We only pan the minimum if the marker ends up behind the card.
*/
-function panMarkerToPreferredAnchor(map, lngLat) {
- if (!map) return;
+function getOrCreateExpandedOverlay(map) {
+ const container = map.getContainer();
+ if (!container) return null;
- const el = map.getContainer();
- if (!el) return;
+ let root = container.querySelector(".sw-expanded-overlay-root");
+ if (root) return root;
- const rect = el.getBoundingClientRect();
- const targetX = rect.width * 0.5;
- const targetY = rect.height * (6 / 7); // 1/7 from bottom => anchor at 6/7 height
+ root = document.createElement("div");
+ root.className = "sw-expanded-overlay-root";
+
+ root.innerHTML = `
+
+
+
+
+
+
+
+
Watching
+
+
☑ Julia ★
— I see it…
+
☑ Kim / CNN
— Blah blah blah
+
☑ Yan ★
— Watch this!!
+
+
+
+
+
+
+
+
The news here (generated)
+
+
+
+
+
+
Live chat / comments
+
+
— …
+
— what the f***?
+
— nice…
+
— my eyes!!
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
+ // helper close fn
+ root.__swClose = () => {
+ try {
+ if (root.__swUnmountFull) root.__swUnmountFull();
+ } catch {}
+ try {
+ if (root.__swMoveHandler && root.__swMap) {
+ root.__swMap.off("move", root.__swMoveHandler);
+ root.__swMap.off("zoom", root.__swMoveHandler);
+ }
+ } catch {}
+ try {
+ root.remove();
+ } catch {}
+ };
+
+ container.appendChild(root);
+ return root;
+}
+
+function updateOverlayPointer(map, overlayRoot, lngLat) {
+ if (!map || !overlayRoot || !lngLat) return;
const p = map.project(lngLat);
- const dx = targetX - p.x;
- const dy = targetY - p.y;
+ const pointer = overlayRoot.querySelector(".sw-overlay-pointer");
+ const line = overlayRoot.querySelector(".sw-overlay-line");
+ const cardWrap = overlayRoot.querySelector(".sw-expanded-overlay-card");
+ const card = overlayRoot.querySelector(".sw-expanded-overlay-card .post-card");
- // tiny deltas -> skip
- if (Math.abs(dx) < 2 && Math.abs(dy) < 2) return;
+ if (!pointer || !line || !cardWrap || !card) return;
+
+ // pointer follows marker
+ pointer.style.left = `${p.x}px`;
+ pointer.style.top = `${p.y}px`;
+
+ // simple line from marker to bottom center of the card
+ const contRect = map.getContainer().getBoundingClientRect();
+ const cardRect = cardWrap.getBoundingClientRect();
+
+ const x1 = p.x;
+ const y1 = p.y;
+
+ const x2 = (cardRect.left - contRect.left) + cardRect.width / 2;
+ const y2 = (cardRect.top - contRect.top) + cardRect.height; // bottom of card
+
+ const dx = x2 - x1;
+ const dy = y2 - y1;
+ const len = Math.sqrt(dx * dx + dy * dy);
+
+ // place a thin line
+ line.style.left = `${x1}px`;
+ line.style.top = `${y1}px`;
+ line.style.width = `${len}px`;
+ line.style.transform = `rotate(${Math.atan2(dy, dx)}rad)`;
+}
+
+function minimalPanToKeepMarkerVisible(map, overlayRoot, lngLat) {
+ if (!map || !overlayRoot || !lngLat) return;
+
+ const p = map.project(lngLat);
+ const cont = map.getContainer();
+ if (!cont) return;
+
+ const contRect = cont.getBoundingClientRect();
+ const cardWrap = overlayRoot.querySelector(".sw-expanded-overlay-card");
+ if (!cardWrap) return;
+
+ const cardRect = cardWrap.getBoundingClientRect();
+
+ const topPad = 18;
+ const bottomSafe = (cardRect.top - contRect.top) - 18;
+
+ let dy = 0;
+
+ // marker too high -> bring it down a bit
+ if (p.y < topPad) dy = (topPad - p.y);
+
+ // marker behind the card -> bring it up a bit
+ if (p.y > bottomSafe) dy = (bottomSafe - p.y);
+
+ // clamp so it never "vent dalle trop loin"
+ dy = Math.max(-160, Math.min(160, dy));
+
+ if (Math.abs(dy) < 2) return;
- // lock close/fetch/rebuild while panning
try {
const until = Date.now() + 2000;
map.__swIgnoreMapClickUntil = until;
@@ -126,7 +272,7 @@ function panMarkerToPreferredAnchor(map, lngLat) {
map.__swIgnoreRebuildUntil = until;
} catch {}
- map.panBy([dx, dy], { duration: 650 });
+ map.panBy([0, dy], { duration: 350 });
}
export function createMarkerForPost(post, mapRef, markersRef, expandedElRef, theme = "blue") {
@@ -160,7 +306,9 @@ export function createMarkerForPost(post, mapRef, markersRef, expandedElRef, the
function unmountIfAny() {
if (root.__swUnmount) {
- try { root.__swUnmount(); } catch {}
+ try {
+ root.__swUnmount();
+ } catch {}
root.__swUnmount = null;
}
}
@@ -185,97 +333,86 @@ export function createMarkerForPost(post, mapRef, markersRef, expandedElRef, the
clearOcclusion(markersRef);
}
- function renderExpanded() {
- unmountIfAny();
- root.className = "post-pin post-pin--expanded";
- root.style.zIndex = "999999";
+ function closeExpandedOverlayIfAny() {
+ const cur = expandedElRef.current;
+ if (cur && cur.__swClose) {
+ try {
+ cur.__swClose();
+ } catch {}
+ }
+ expandedElRef.current = null;
+ clearOcclusion(markersRef);
+ }
- // 2000ms locks so recenter/fetch/rebuild does not close this expanded popup
+ function renderExpandedOverlay() {
+ // locks so fetch/rebuild doesn't close while opening
try {
- const m = mapRef.current;
- if (m) {
- const until = Date.now() + 2000;
- m.__swIgnoreMapClickUntil = until;
- m.__swIgnoreCloseUntil = until;
- m.__swIgnoreFetchUntil = until;
- m.__swIgnoreRebuildUntil = until;
- }
+ const until = Date.now() + 2000;
+ map.__swIgnoreMapClickUntil = until;
+ map.__swIgnoreCloseUntil = until;
+ map.__swIgnoreFetchUntil = until;
+ map.__swIgnoreRebuildUntil = until;
} catch {}
+ closeExpandedOverlayIfAny();
+
+ const overlayRoot = getOrCreateExpandedOverlay(map);
+ if (!overlayRoot) return;
+
+ // fill headline
const headline = escapeHtml(post?.title || "Untitled");
+ const titleEl = overlayRoot.querySelector(".sw-news-title");
+ if (titleEl) titleEl.innerHTML = headline;
- root.innerHTML = `
-
-
-
-
-
+ // mount template full into the left area
+ try {
+ if (overlayRoot.__swUnmountFull) overlayRoot.__swUnmountFull();
+ } catch {}
+ overlayRoot.__swUnmountFull = null;
-