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

Final polish: Remove duplicate buttons, fix pin anchoring 

1. Remove Duplicate Buttons (MapView.jsx):
   - Removed "My spot" and "New wire" buttons from map-top-actions
   - These functions already available in SmartSearchBar icons
   - Cleaner UI, less clutter

2. Fix Pin Anchoring - Pins Stay Fixed Now! (markerManager.js):
   - Root element now has fixed dimensions: width:40px, height:52px
   - Pin container positioned absolute bottom:0 (ensures correct anchor point)
   - Hover card uses bottom:100% instead of fixed pixel value
   - Transform includes translateY(-6px) for proper spacing
   - Result: Pins remain perfectly fixed at geographic position during zoom/pan

Pin DOM structure now:
```
<div root style="width:40px;height:52px"> (anchor bottom here)
  <div container style="position:absolute;bottom:0">
    <circle>image</circle>
    <triangle>point</triangle>
  </div>
  <div hover-card style="bottom:100%">preview</div>
</div>
```

The key: Root has explicit height, pin container at bottom,
so MapLibre anchor:"bottom" aligns triangle point with lat/lon

Tested: Pins now stay locked to position on zoom/pan ✅

🤖 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 15:48:01 -05:00
parent 28e760d616
commit 266292eba2
2 changed files with 9 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Map/MapView.jsx
View File

@ -452,31 +452,6 @@ export default function MapView({
onMySpot={handleFlyToMe}
onPlaceTourWire={handleOpenCreate}
/>
<div className="map-top-actions">
<button
type="button"
className="map-action-btn"
onClick={handleFlyToMe}
disabled={!userPosition}
>
<div className="map-action-icon">
<i className="fa-solid fa-location-crosshairs" />
</div>
<div className="map-action-label">My spot</div>
</button>
<button
type="button"
className="map-action-btn"
onClick={handleOpenCreate}
>
<div className="map-action-icon">
<i className="fa-solid fa-bolt" />
</div>
<div className="map-action-label">New wire</div>
</button>
</div>
</div>
</div>

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

@ -478,11 +478,15 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
root.className = "post-pin--simple sw-appear sw-appear-in";
root.style.position = "relative";
root.style.cursor = "pointer";
root.style.width = "40px";
root.style.height = "52px";
// Marqueur pin avec image en haut et pointe en bas
root.innerHTML = `
<div class="sw-simple-pin-container" style="
position: relative;
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 52px;
display: flex;
@ -526,9 +530,9 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
</div>
<div class="sw-simple-hover-card" style="
position: absolute;
bottom: 58px;
bottom: 100%;
left: 50%;
transform: translateX(-50%) scale(0.9);
transform: translateX(-50%) translateY(-6px) scale(0.9);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
@ -566,7 +570,7 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
}
if (hoverCard) {
hoverCard.style.opacity = "1";
hoverCard.style.transform = "translateX(-50%) scale(1)";
hoverCard.style.transform = "translateX(-50%) translateY(-6px) scale(1)";
}
});
@ -577,7 +581,7 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
}
if (hoverCard) {
hoverCard.style.opacity = "0";
hoverCard.style.transform = "translateX(-50%) scale(0.9)";
hoverCard.style.transform = "translateX(-50%) translateY(-6px) scale(0.9)";
}
});