44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import { useMap } from "@vis.gl/react-google-maps"
|
|
import { useEffect, useState } from "react"
|
|
|
|
import type { MapType } from "@scandic-hotels/design-system/Map/mapConstants"
|
|
|
|
export function useZoomControls(mapType: MapType) {
|
|
const map = useMap()
|
|
const [zoomLevel, setZoomLevel] = useState<number>(mapType.DEFAULT_ZOOM)
|
|
|
|
const zoomIn = () => {
|
|
if (map && zoomLevel < mapType.MAX_ZOOM) {
|
|
map.setZoom(zoomLevel + 1)
|
|
}
|
|
}
|
|
|
|
const zoomOut = () => {
|
|
if (map && zoomLevel > mapType.MIN_ZOOM) {
|
|
map.setZoom(zoomLevel - 1)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!map) return
|
|
|
|
const handleZoomChanged = () => {
|
|
const currentZoom = map.getZoom()
|
|
if (currentZoom != null) {
|
|
setZoomLevel(currentZoom)
|
|
}
|
|
}
|
|
|
|
const listener = map.addListener("zoom_changed", handleZoomChanged)
|
|
return () => listener.remove()
|
|
}, [map])
|
|
|
|
return {
|
|
zoomLevel,
|
|
zoomIn,
|
|
zoomOut,
|
|
isMinZoom: zoomLevel <= mapType.MIN_ZOOM,
|
|
isMaxZoom: zoomLevel >= mapType.MAX_ZOOM,
|
|
}
|
|
}
|