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:
parent
28e760d616
commit
266292eba2
|
|
@ -452,31 +452,6 @@ export default function MapView({
|
||||||
onMySpot={handleFlyToMe}
|
onMySpot={handleFlyToMe}
|
||||||
onPlaceTourWire={handleOpenCreate}
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -478,11 +478,15 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
|
||||||
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.position = "relative";
|
||||||
root.style.cursor = "pointer";
|
root.style.cursor = "pointer";
|
||||||
|
root.style.width = "40px";
|
||||||
|
root.style.height = "52px";
|
||||||
|
|
||||||
// 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="
|
<div class="sw-simple-pin-container" style="
|
||||||
position: relative;
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -526,9 +530,9 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
|
||||||
</div>
|
</div>
|
||||||
<div class="sw-simple-hover-card" style="
|
<div class="sw-simple-hover-card" style="
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 58px;
|
bottom: 100%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%) scale(0.9);
|
transform: translateX(-50%) translateY(-6px) scale(0.9);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||||
|
|
@ -566,7 +570,7 @@ export function createSimpleMarkerForPost(post, mapRef, markersRef, expandedElRe
|
||||||
}
|
}
|
||||||
if (hoverCard) {
|
if (hoverCard) {
|
||||||
hoverCard.style.opacity = "1";
|
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) {
|
if (hoverCard) {
|
||||||
hoverCard.style.opacity = "0";
|
hoverCard.style.opacity = "0";
|
||||||
hoverCard.style.transform = "translateX(-50%) scale(0.9)";
|
hoverCard.style.transform = "translateX(-50%) translateY(-6px) scale(0.9)";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue