49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { useMap } from '@vis.gl/react-maplibre'
|
||
|
||
interface WeatherMapControlsProps {
|
||
center: [number, number]
|
||
zoom: number
|
||
}
|
||
|
||
export function WeatherMapControls({ center, zoom }: WeatherMapControlsProps) {
|
||
const { current: map } = useMap()
|
||
|
||
const buttons = [
|
||
{
|
||
label: '+',
|
||
tooltip: '확대',
|
||
onClick: () => map?.zoomIn(),
|
||
},
|
||
{
|
||
label: '−',
|
||
tooltip: '축소',
|
||
onClick: () => map?.zoomOut(),
|
||
},
|
||
{
|
||
label: '🎯',
|
||
tooltip: '한국 해역 초기화',
|
||
onClick: () => map?.flyTo({ center, zoom, duration: 1000 }),
|
||
},
|
||
]
|
||
|
||
return (
|
||
<div className="absolute top-4 right-4 z-10">
|
||
<div className="flex flex-col gap-2">
|
||
{buttons.map(({ label, tooltip, onClick }) => (
|
||
<div key={tooltip} className="relative group">
|
||
<button
|
||
onClick={onClick}
|
||
className="w-[38px] h-[38px] bg-[rgba(18,25,41,0.9)] backdrop-blur-xl border border-border rounded-sm text-text-2 flex items-center justify-center hover:bg-bg-hover hover:text-text-1 transition-all text-base"
|
||
>
|
||
{label}
|
||
</button>
|
||
<div className="absolute right-full top-1/2 -translate-y-1/2 mr-2 px-2 py-1 text-xs bg-bg-0 text-text-1 border border-border rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-20">
|
||
{tooltip}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|