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

Feat/SW-1937 destination overview map mobile

Browse Source 
* feat(SW-1937): Added gestureHandling prop to be able to scroll past the map on the overview page

* feat(SW-1937): Added active map card on overview page for smaller viewports

Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-03-24 07:34:36 +00:00
parent 542e20e69c
commit f93afdbfbf
17 changed files with 197 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx
View File

@@ -32,10 +32,10 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
const amenities = hotel.detailedFacilities.slice(0, 5)
const itemRef = useRef<HTMLElement>(null)
const { setHoveredHotel, activeHotel } = useDestinationPageHotelsMapStore()
const { setHoveredMarker, activeMarker } = useDestinationPageHotelsMapStore()
useEffect(() => {
if (activeHotel === hotel.operaId) {
if (activeMarker === hotel.operaId) {
const element = itemRef.current
if (element) {
element.scrollIntoView({
@@ -45,24 +45,24 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
})
}
}
}, [activeHotel, hotel.operaId])
}, [activeMarker, hotel.operaId])
const handleMouseEnter = useCallback(() => {
if (hotel.operaId) {
setHoveredHotel(hotel.operaId)
setHoveredMarker(hotel.operaId)
}
}, [setHoveredHotel, hotel.operaId])
}, [setHoveredMarker, hotel.operaId])
const handleMouseLeave = useCallback(() => {
setHoveredHotel(null)
}, [setHoveredHotel])
setHoveredMarker(null)
}, [setHoveredMarker])
return (
<article
ref={itemRef}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className={`${styles.hotelListItem} ${activeHotel === hotel.operaId ? styles.activeCard : ""}`}
className={`${styles.hotelListItem} ${activeMarker === hotel.operaId ? styles.activeCard : ""}`}
>
<div className={styles.imageWrapper}>
<ImageGallery

9
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/ActiveMapCard/activeMapCard.module.css Normal file
View File

@@ -0,0 +1,9 @@
.activeMapCard {
position: absolute;
bottom: var(--Space-x2);
left: var(--Space-x2);
right: var(--Space-x2);
max-width: 400px;
margin: 0 auto;
z-index: 1;
}

42
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/ActiveMapCard/index.tsx Normal file
View File

@@ -0,0 +1,42 @@
"use client"
import { useMediaQuery } from "usehooks-ts"
import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
import HotelMapCard from "../../../HotelMapCard"
import styles from "./activeMapCard.module.css"
import type { DestinationMarker } from "@/types/components/maps/destinationMarkers"
interface ActiveMapCardProps {
markers: DestinationMarker[]
}
export default function ActiveMapCard({ markers }: ActiveMapCardProps) {
const { activeMarker } = useDestinationPageHotelsMapStore()
const activeMapCardVisible = useMediaQuery("(max-width: 949px)")
if (!activeMarker || !activeMapCardVisible) {
return null
}
const activeHotel = markers.find((marker) => marker.id === activeMarker)
if (!activeHotel) {
return null
}
return (
<HotelMapCard
className={styles.activeMapCard}
amenities={activeHotel.amenities}
tripadvisorRating={activeHotel.tripadvisor}
hotelName={activeHotel.name}
image={activeHotel.image}
url={activeHotel.url}
type="article"
/>
)
}

3
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/index.tsx
View File

@@ -5,6 +5,7 @@ import DynamicMap from "../../Map/DynamicMap"
import MapContent from "../../Map/MapContent"
import MapProvider from "../../Map/MapProvider"
import { getHotelMapMarkers, mapMarkerDataToGeoJson } from "../../Map/utils"
import ActiveMapCard from "./ActiveMapCard"
import InputForm from "./InputForm"
import type { MapLocation } from "@/types/components/mapLocation"
@@ -43,8 +44,10 @@ export default async function OverviewMapContainer({
markers={markers}
defaultCoordinates={defaultCoordinates}
defaultZoom={defaultZoom}
gestureHandling="cooperative"
>
<MapContent geojson={geoJson} />
<ActiveMapCard markers={markers} />
</DynamicMap>
</MapProvider>
)

10
apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx
View File

@@ -19,19 +19,19 @@ interface MapCardCarouselProps {
export default function HotelCardCarousel({
visibleHotels,
}: MapCardCarouselProps) {
const { activeHotel, setActiveHotel } = useDestinationPageHotelsMapStore()
const { activeMarker, setActiveMarker } = useDestinationPageHotelsMapStore()
const selectedHotelIdx = visibleHotels.findIndex(
({ hotel }) => hotel.operaId === activeHotel
({ hotel }) => hotel.operaId === activeMarker
)
const handleScrollSelect = useCallback(
(idx: number) => {
if (selectedHotelIdx !== -1) {
setActiveHotel(visibleHotels[idx]?.hotel.operaId)
setActiveMarker(visibleHotels[idx]?.hotel.operaId)
}
},
[setActiveHotel, visibleHotels, selectedHotelIdx]
[setActiveMarker, visibleHotels, selectedHotelIdx]
)
return (
@@ -47,7 +47,7 @@ export default function HotelCardCarousel({
<Carousel.Item key={hotel.operaId} className={styles.item}>
<HotelMapCard
className={cx(styles.carouselCard, {
[styles.noActiveHotel]: !activeHotel,
[styles.noActiveHotel]: !activeMarker,
})}
tripadvisorRating={hotel.ratings?.tripAdvisor.rating}
hotelName={hotel.name}

4
apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx
View File

@@ -34,7 +34,7 @@ export default function HotelListingItem({
}: HotelListingItemProps) {
const intl = useIntl()
const params = useParams()
const { setActiveHotel } = useDestinationPageHotelsMapStore()
const { setActiveMarker } = useDestinationPageHotelsMapStore()
const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
const amenities = hotel.detailedFacilities.slice(0, 5)
const [mapUrl, setMapUrl] = useState<string | null>(null)
@@ -108,7 +108,7 @@ export default function HotelListingItem({
<Link
href={mapUrl}
scroll={true}
onClick={() => setActiveHotel(hotel.operaId)}
onClick={() => setActiveMarker(hotel.operaId)}
>
{intl.formatMessage({ id: "See on map" })}
<ChevronRightSmallIcon />

17
apps/scandic-web/components/ContentType/DestinationPage/HotelListing/hotelListing.module.css
View File

@@ -9,8 +9,14 @@
}
.listHeader {
display: grid;
gap: var(--Space-x2);
}
.cta {
display: flex;
justify-content: space-between;
gap: var(--Spacing-x2);
}
.hotelList {
@@ -26,3 +32,14 @@
);
}
}
@media screen and (min-width: 1367px) {
.listHeader {
display: flex;
justify-content: space-between;
}
.mapButton {
display: none !important; /* Important to override button higher specificy */
}
}

33
apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx
View File

@@ -1,13 +1,17 @@
"use client"
import { useRef } from "react"
import Link from "next/link"
import { useParams } from "next/navigation"
import { useEffect, useRef, useState } from "react"
import { useIntl } from "react-intl"
import { useDestinationDataStore } from "@/stores/destination-data"
import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
import { MapIcon } from "@/components/Icons"
import Alert from "@/components/TempDesignSystem/Alert"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import Button from "@/components/TempDesignSystem/Button"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useScrollToTop } from "@/hooks/useScrollToTop"
@@ -21,6 +25,8 @@ import { AlertTypeEnum } from "@/types/enums/alert"
export default function HotelListing() {
const intl = useIntl()
const scrollRef = useRef<HTMLElement>(null)
const params = useParams()
const [mapUrl, setMapUrl] = useState<string | null>(null)
const { showBackToTop, scrollToTop } = useScrollToTop({
threshold: 300,
elementRef: scrollRef,
@@ -30,6 +36,12 @@ export default function HotelListing() {
isLoading: state.isLoading,
}))
useEffect(() => {
const url = new URL(window.location.href)
url.searchParams.set("view", "map")
setMapUrl(url.toString())
}, [params])
return isLoading ? (
<HotelListingSkeleton />
) : (
@@ -43,7 +55,24 @@ export default function HotelListing() {
{ count: activeHotels.length }
)}
</Subtitle>
<DestinationFilterAndSort listType="hotel" />
<div className={styles.cta}>
{mapUrl && (
<Button
className={styles.mapButton}
asChild
intent="secondary"
variant="icon"
size="small"
theme="base"
>
<Link href={mapUrl}>
<MapIcon />
{intl.formatMessage({ id: "See on map" })}
</Link>
</Button>
)}
<DestinationFilterAndSort listType="hotel" />
</div>
</div>
{activeHotels.length === 0 ? (
<Alert

4
apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx
View File

@@ -44,10 +44,10 @@ export default function HotelMapCard({
const intl = useIntl()
const pageType = usePageType()
const [imageError, setImageError] = useState(false)
const { setActiveHotel } = useDestinationPageHotelsMapStore()
const { setActiveMarker } = useDestinationPageHotelsMapStore()
function handleClose() {
setActiveHotel(null)
setActiveMarker(null)
}
function Wrapper({ children }: React.PropsWithChildren) {

24
apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
View File

@@ -3,14 +3,18 @@
import "client-only"
import { Map, type MapProps, useMap } from "@vis.gl/react-google-maps"
import { type PropsWithChildren, useEffect } from "react"
import { type PropsWithChildren, useEffect, useRef } from "react"
import { useIntl } from "react-intl"
import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
import ErrorBoundary from "@/components/ErrorBoundary/ErrorBoundary"
import { CloseLargeIcon, MinusIcon, PlusIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import { usePageType } from "../PageTypeProvider"
import styles from "./dynamicMap.module.css"
import type { DestinationMarker } from "@/types/components/maps/destinationMarkers"
@@ -26,6 +30,7 @@ interface DynamicMapProps {
defaultCoordinates: google.maps.LatLngLiteral | null
defaultZoom: number
fitBounds?: boolean
gestureHandling?: "greedy" | "cooperative" | "auto" | "none"
onClose?: () => void
}
@@ -36,10 +41,23 @@ export default function DynamicMap({
defaultZoom,
fitBounds = true,
onClose,
gestureHandling = "auto",
children,
}: PropsWithChildren<DynamicMapProps>) {
const intl = useIntl()
const map = useMap()
const pageType = usePageType()
const { activeMarker } = useDestinationPageHotelsMapStore()
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
if (ref.current && activeMarker && pageType === "overview") {
ref.current.scrollIntoView({
behavior: "smooth",
block: "end",
})
}
}, [activeMarker, pageType])
useEffect(() => {
if (map && fitBounds) {
@@ -81,12 +99,12 @@ export default function DynamicMap({
defaultZoom,
disableDefaultUI: true,
clickableIcons: false,
gestureHandling: "greedy",
gestureHandling,
mapId,
}
return (
<div className={styles.mapWrapper}>
<div className={styles.mapWrapper} ref={ref}>
<ErrorBoundary fallback={<h2>Unable to display map</h2>}>
<Map {...mapOptions}>{children}</Map>
</ErrorBoundary>

6
apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/index.tsx
View File

@@ -27,10 +27,10 @@ export default function ClusterMarker({
onMarkerClick,
hotelIds,
}: ClusterMarkerProps) {
const { hoveredHotel, activeHotel } = useDestinationPageHotelsMapStore()
const { hoveredMarker, activeMarker } = useDestinationPageHotelsMapStore()
const isActive =
hotelIds.includes(Number(hoveredHotel)) ||
hotelIds.includes(Number(activeHotel))
hotelIds.includes(Number(hoveredMarker)) ||
hotelIds.includes(Number(activeMarker))
const handleClick = useCallback(() => {
if (onMarkerClick) {

27
apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx
View File

@@ -5,7 +5,6 @@ import {
AdvancedMarkerAnchorPoint,
useAdvancedMarkerRef,
} from "@vis.gl/react-google-maps"
import { useCallback } from "react"
import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
@@ -24,30 +23,30 @@ interface MarkerProps {
export default function Marker({ position, properties }: MarkerProps) {
const [markerRef] = useAdvancedMarkerRef()
const { setHoveredHotel, setActiveHotel, hoveredHotel, activeHotel } =
const { setHoveredMarker, setActiveMarker, hoveredMarker, activeMarker } =
useDestinationPageHotelsMapStore()
const handleClick = useCallback(() => {
setActiveHotel(properties.id)
function handleMarkerClick() {
setActiveMarker(properties.id)
trackMapClick(properties.name)
}, [setActiveHotel, properties])
}
const handleMouseEnter = useCallback(() => {
setHoveredHotel(properties.id)
}, [setHoveredHotel, properties.id])
function handleMouseEnter() {
setHoveredMarker(properties.id)
}
const handleMouseLeave = useCallback(() => {
setHoveredHotel(null)
}, [setHoveredHotel])
function handleMouseLeave() {
setHoveredMarker(null)
}
const isHovered = hoveredHotel === properties.id
const isActive = activeHotel === properties.id
const isHovered = hoveredMarker === properties.id
const isActive = activeMarker === properties.id
return (
<AdvancedMarker
ref={markerRef}
position={position}
onClick={handleClick}
onClick={handleMarkerClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
anchorPoint={AdvancedMarkerAnchorPoint.BOTTOM_CENTER}

27
apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/index.tsx
View File

@@ -34,30 +34,33 @@ export default function MapContent({
geojson,
hasActiveFilters,
}: MapContentProps) {
const { setActiveHotel, activeHotel } = useDestinationPageHotelsMapStore()
const { setActiveMarker, activeMarker } = useDestinationPageHotelsMapStore()
const map = useMap()
const { clusters, containedHotels } = useSupercluster<MarkerProperties>(
geojson,
CLUSTER_OPTIONS
)
const { clusters, containedHotels, getClusterZoom } =
useSupercluster<MarkerProperties>(geojson, CLUSTER_OPTIONS)
// Based on the length of active filters, we decide if should show clusters or individual markers
const markerList = hasActiveFilters ? geojson.features : clusters
useEffect(() => {
map?.addListener("click", () => {
if (activeHotel) {
setActiveHotel(null)
if (activeMarker) {
setActiveMarker(null)
}
})
}, [activeHotel, map, setActiveHotel])
}, [activeMarker, map, setActiveMarker])
function handleClusterClick(position: google.maps.LatLngLiteral) {
function handleClusterClick(
position: google.maps.LatLngLiteral,
clusterProperties: ClusterProperties
) {
const currentZoom = map && map.getZoom()
const clusterZoom = getClusterZoom(clusterProperties.cluster_id)
if (currentZoom) {
map.panTo(position)
map.setZoom(currentZoom + 2)
map.setZoom(clusterZoom ?? currentZoom + 2)
}
}
@@ -73,7 +76,9 @@ export default function MapContent({
position={{ lat, lng }}
size={clusterProperties.point_count}
sizeAsText={String(clusterProperties.point_count_abbreviated)}
onMarkerClick={handleClusterClick}
onMarkerClick={(position) =>
handleClusterClick(position, clusterProperties)
}
hotelIds={containedHotels[idx]}
/>
) : (

3
apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx
View File

@@ -48,7 +48,7 @@ export default function Map({
}: PropsWithChildren<MapProps>) {
const router = useRouter()
const searchParams = useSearchParams()
const { activeHotel: activeHotelId } = useDestinationPageHotelsMapStore()
const { activeMarker: activeHotelId } = useDestinationPageHotelsMapStore()
const isMapView = useMemo(
() => searchParams.get("view") === "map",
[searchParams]
@@ -169,6 +169,7 @@ export default function Map({
defaultCoordinates={defaultCoordinates}
defaultZoom={defaultZoom}
fitBounds={!activeHotel}
gestureHandling="greedy"
>
<MapContent
geojson={geoJson}

6
apps/scandic-web/components/ContentType/DestinationPage/StaticMap/staticMap.module.css
View File

@@ -17,3 +17,9 @@
right: var(--Spacing-x2);
bottom: var(--Spacing-x2);
}
@media screen and (max-width: 1366px) {
.mapWrapper {
display: none;
}
}

9
apps/scandic-web/hooks/maps/use-supercluster.ts
View File

@@ -36,6 +36,14 @@ export function useSupercluster<T extends GeoJsonProperties>(
return clusterer.getClusters(bbox, zoom)
}, [version, clusterer, bbox, zoom])
function getClusterZoom(clusterId: number) {
if (!clusterer || version === 0) {
return null
}
return clusterer.getClusterExpansionZoom(clusterId)
}
// retrieve the hotel ids included in the cluster
const containedHotels = clusters.map((cluster) => {
if (cluster.properties?.cluster && typeof cluster.id === "number") {
@@ -47,5 +55,6 @@ export function useSupercluster<T extends GeoJsonProperties>(
return {
clusters,
containedHotels,
getClusterZoom,
}
}

16
apps/scandic-web/stores/destination-page-hotels-map.ts
View File

@@ -1,16 +1,16 @@
import { create } from "zustand"
interface DestinationPageHotelsMapState {
hoveredHotel: string | null
activeHotel: string | null
setHoveredHotel: (hotelId: string | null) => void
setActiveHotel: (hotelId: string | null) => void
hoveredMarker: string | null
activeMarker: string | null
setHoveredMarker: (hotelId: string | null) => void
setActiveMarker: (hotelId: string | null) => void
}
export const useDestinationPageHotelsMapStore =
create<DestinationPageHotelsMapState>((set) => ({
hoveredHotel: null,
activeHotel: null,
setHoveredHotel: (hotelId) => set({ hoveredHotel: hotelId }),
setActiveHotel: (hotelId) => set({ activeHotel: hotelId }),
hoveredMarker: null,
activeMarker: null,
setHoveredMarker: (hotelId) => set({ hoveredMarker: hotelId }),
setActiveMarker: (hotelId) => set({ activeMarker: hotelId }),
}))