scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-2241-country-map (pull request #2808)

Browse Source 
Feat/SW-2241 country map

Approved-by: Erik Tiekstra
Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Matilda Landström
2025-09-24 12:04:01 +00:00
parent af4f544b8a
commit 00689607bc
93 changed files with 1876 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/design-system/lib/components/Map/InteractiveMap/index.tsx
View File

@@ -7,14 +7,9 @@ import { useIntl } from 'react-intl'
import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import {
DEFAULT_ZOOM,
MAP_RESTRICTIONS,
MAX_ZOOM,
MIN_ZOOM,
} from '../mapConstants'
import { HOTEL_PAGE, MAP_RESTRICTIONS } from '../mapConstants'
import { useZoomControls } from './useZoomControls'
import { useZoomControls } from '@scandic-hotels/common/hooks/map/useZoomControls'
import { HotelListingMapContent } from './HotelListingMapContent'
import PoiMapMarkers from './PoiMapMarkers'
@@ -87,12 +82,12 @@ export function InteractiveMap({
const intl = useIntl()
const map = useMap()
const [hasInitializedBounds, setHasInitializedBounds] = useState(false)
const { zoomIn, zoomOut, isMaxZoom, isMinZoom } = useZoomControls()
const { zoomIn, zoomOut, isMaxZoom, isMinZoom } = useZoomControls(HOTEL_PAGE)
const mapOptions: MapProps = {
defaultZoom: DEFAULT_ZOOM,
minZoom: MIN_ZOOM,
maxZoom: MAX_ZOOM,
defaultZoom: HOTEL_PAGE.DEFAULT_ZOOM,
minZoom: HOTEL_PAGE.MIN_ZOOM,
maxZoom: HOTEL_PAGE.MAX_ZOOM,
defaultCenter: coordinates,
disableDefaultUI: true,
clickableIcons: false,

42
packages/design-system/lib/components/Map/InteractiveMap/useZoomControls.ts
View File

@@ -1,42 +0,0 @@
import { useMap } from '@vis.gl/react-google-maps'
import { useEffect, useState } from 'react'
import { DEFAULT_ZOOM, MAX_ZOOM, MIN_ZOOM } from '../mapConstants'
export function useZoomControls() {
const map = useMap()
const [zoomLevel, setZoomLevel] = useState(DEFAULT_ZOOM)
const zoomIn = () => {
if (map && zoomLevel < MAX_ZOOM) {
map.setZoom(zoomLevel + 1)
}
}
const zoomOut = () => {
if (map && zoomLevel > 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 <= MIN_ZOOM,
isMaxZoom: zoomLevel >= MAX_ZOOM,
}
}