fix: move map action buttons to top-left to avoid legend overlap
Fit and traffic buttons were hidden behind the legend at bottom-right. Moved both into a column group at top-left below the zoom controls, where there is clear unobstructed space. Replaced emoji with TRF text label.
This commit is contained in:
@@ -523,31 +523,31 @@ export default function MapView({ nodes, activeCalls, incidents = [], lastUpdate
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* ── Traffic toggle ───────────────────────────────────────────────────── */}
|
{/* ── Map action buttons — top-left, below zoom controls ──────────────── */}
|
||||||
{process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY && (
|
<div className="absolute top-[4.5rem] left-3 z-[1001] flex flex-col gap-1">
|
||||||
<button
|
|
||||||
onClick={() => setTrafficEnabled((v) => !v)}
|
|
||||||
title="Toggle traffic layer"
|
|
||||||
className={`absolute bottom-[6.5rem] right-3 z-[1001] w-8 h-8 border rounded text-xs font-bold leading-none transition-colors flex items-center justify-center select-none ${
|
|
||||||
trafficEnabled
|
|
||||||
? "bg-green-700 border-green-500 text-white"
|
|
||||||
: "bg-gray-950/90 border-gray-700 text-gray-400 hover:bg-gray-800"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
🚦
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* ── Auto-fit button ──────────────────────────────────────────────────── */}
|
|
||||||
{mapInstance && allPositions.length > 0 && (
|
{mapInstance && allPositions.length > 0 && (
|
||||||
<button
|
<button
|
||||||
onClick={handleFitAll}
|
onClick={handleFitAll}
|
||||||
title="Fit all markers in view"
|
title="Fit all markers in view"
|
||||||
className="absolute bottom-[9.5rem] right-3 z-[1001] w-8 h-8 bg-gray-950/90 border border-gray-700 rounded text-white text-base leading-none hover:bg-gray-800 transition-colors flex items-center justify-center select-none"
|
className="w-8 h-8 bg-gray-950/90 border border-gray-700 rounded text-white text-base leading-none hover:bg-gray-800 transition-colors flex items-center justify-center select-none"
|
||||||
>
|
>
|
||||||
⤢
|
⤢
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
{process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY && (
|
||||||
|
<button
|
||||||
|
onClick={() => setTrafficEnabled((v) => !v)}
|
||||||
|
title="Toggle traffic layer"
|
||||||
|
className={`w-8 h-8 border rounded text-xs font-mono font-bold leading-none transition-colors flex items-center justify-center select-none ${
|
||||||
|
trafficEnabled
|
||||||
|
? "bg-indigo-700 border-indigo-500 text-white"
|
||||||
|
: "bg-gray-950/90 border-gray-700 text-gray-400 hover:bg-gray-800"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
TRF
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* ── Clock — bottom-left for TOC situational awareness ───────────────── */}
|
{/* ── Clock — bottom-left for TOC situational awareness ───────────────── */}
|
||||||
<div className="absolute bottom-8 left-3 z-[1001] bg-gray-950/90 border border-gray-800 rounded-lg px-3 py-2 pointer-events-none">
|
<div className="absolute bottom-8 left-3 z-[1001] bg-gray-950/90 border border-gray-800 rounded-lg px-3 py-2 pointer-events-none">
|
||||||
|
|||||||
Reference in New Issue
Block a user