99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
"use client"
|
|
import { Map, type MapProps, useMap } from "@vis.gl/react-google-maps"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MinusIcon, PlusIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
|
|
import HotelListingMapContent from "./HotelListingMapContent"
|
|
import HotelMapContent from "./HotelMapContent"
|
|
|
|
import styles from "./interactiveMap.module.css"
|
|
|
|
import type { InteractiveMapProps } from "@/types/components/hotelPage/map/interactiveMap"
|
|
|
|
export default function InteractiveMap({
|
|
coordinates,
|
|
pointsOfInterest,
|
|
activePoi,
|
|
hotelPins,
|
|
activeHotelPin,
|
|
mapId,
|
|
closeButton,
|
|
onActivePoiChange,
|
|
onActiveHotelPinChange,
|
|
}: InteractiveMapProps) {
|
|
const intl = useIntl()
|
|
const map = useMap()
|
|
|
|
const mapOptions: MapProps = {
|
|
defaultZoom: 14,
|
|
defaultCenter: coordinates,
|
|
disableDefaultUI: true,
|
|
clickableIcons: false,
|
|
mapId,
|
|
}
|
|
|
|
function zoomIn() {
|
|
const currentZoom = map && map.getZoom()
|
|
if (currentZoom) {
|
|
map.setZoom(currentZoom + 1)
|
|
}
|
|
}
|
|
function zoomOut() {
|
|
const currentZoom = map && map.getZoom()
|
|
if (currentZoom) {
|
|
map.setZoom(currentZoom - 1)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={styles.mapContainer}>
|
|
<Map {...mapOptions}>
|
|
{hotelPins && (
|
|
<HotelListingMapContent
|
|
activeHotelPin={activeHotelPin}
|
|
hotelPins={hotelPins}
|
|
onActiveHotelPinChange={onActiveHotelPinChange}
|
|
/>
|
|
)}
|
|
{pointsOfInterest && (
|
|
<HotelMapContent
|
|
coordinates={coordinates}
|
|
pointsOfInterest={pointsOfInterest}
|
|
onActivePoiChange={onActivePoiChange}
|
|
activePoi={activePoi}
|
|
/>
|
|
)}
|
|
</Map>
|
|
<div className={styles.ctaButtons}>
|
|
{closeButton}
|
|
<div className={styles.zoomButtons}>
|
|
<Button
|
|
theme="base"
|
|
intent="inverted"
|
|
variant="icon"
|
|
size="small"
|
|
className={styles.zoomButton}
|
|
onClick={zoomOut}
|
|
aria-label={intl.formatMessage({ id: "Zoom in" })}
|
|
>
|
|
<MinusIcon color="burgundy" width={20} height={20} />
|
|
</Button>
|
|
<Button
|
|
theme="base"
|
|
intent="inverted"
|
|
variant="icon"
|
|
size="small"
|
|
className={styles.zoomButton}
|
|
onClick={zoomIn}
|
|
aria-label={intl.formatMessage({ id: "Zoom out" })}
|
|
>
|
|
<PlusIcon color="burgundy" width={20} height={20} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|