canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix: Simplify marker DOM structure for better map anchoring 

Removed intermediate sw-simple-pin-container div that was causing
issues with MapLibre GL marker positioning. The root element is now
directly a flex container, which should fix pins staying at screen
position instead of following map geography during pan/rotation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name 2025-12-23 16:03:58 -05:00
parent 266292eba2
commit 9d906fb4a4
1 changed files with 3 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Map/markerManager.js
View File

@ -476,23 +476,15 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
root.classList.add("sw-appear"); root.classList.add("sw-appear");
requestAnimationFrame(() => root.classList.add("sw-appear-in")); requestAnimationFrame(() => root.classList.add("sw-appear-in"));
root.className = "post-pin--simple sw-appear sw-appear-in"; root.className = "post-pin--simple sw-appear sw-appear-in";
root.style.position = "relative";
root.style.cursor = "pointer"; root.style.cursor = "pointer";
root.style.width = "40px"; root.style.width = "40px";
root.style.height = "52px"; root.style.height = "52px";
root.style.display = "flex";
root.style.flexDirection = "column";
root.style.alignItems = "center";
// Marqueur pin avec image en haut et pointe en bas // Marqueur pin avec image en haut et pointe en bas
root.innerHTML = ` root.innerHTML = `
<div class="sw-simple-pin-container" style="
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 52px;
display: flex;
flex-direction: column;
align-items: center;
">
<div class="sw-simple-marker" style=" <div class="sw-simple-marker" style="
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -527,7 +519,6 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
margin-top: -2px; margin-top: -2px;
z-index: 1; z-index: 1;
"></div> "></div>
</div>
<div class="sw-simple-hover-card" style=" <div class="sw-simple-hover-card" style="
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;