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

Merged in fix/SW-2824-map-mobile-card-hide-pin (pull request #2458)

Browse Source 
fix(SW-2824): move pin latitude on mobile to make space for hotel card on map

* fix(SW-2824): move pin latitude on mobile to make space for hotel card on map


Approved-by: Anton Gunnarsson
This commit is contained in:
Bianca Widstam
2025-06-27 12:57:58 +00:00
parent 157c0415e5
commit 4755225bcc
2 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
View File

@@ -72,13 +72,17 @@ export default function SelectHotelContent({
const hotel = hotels.find((hotel) => hotel.hotel.name === activeHotel) const hotel = hotels.find((hotel) => hotel.hotel.name === activeHotel)
if (hotel && hotel.hotel.location) { if (hotel && hotel.hotel.location) {
return { return isAboveMobile
lat: hotel.hotel.location.latitude, ? {
lng: hotel.hotel.location.longitude, lat: hotel.hotel.location.latitude,
} lng: hotel.hotel.location.longitude,
}
: {
lat: hotel.hotel.location.latitude - 0.003,
lng: hotel.hotel.location.longitude,
}
} }
} }
return isAboveMobile return isAboveMobile
? cityCoordinates ? cityCoordinates
: { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 } : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 }
@@ -208,6 +212,7 @@ export default function SelectHotelContent({
hotelPins={filteredHotelPins} hotelPins={filteredHotelPins}
mapId={mapId} mapId={mapId}
onTilesLoaded={debouncedUpdateHotelCards} onTilesLoaded={debouncedUpdateHotelCards}
fitBounds={isAboveMobile || !activeHotel}
/> />
</div> </div>
) )

21
apps/scandic-web/components/Maps/InteractiveMap/index.tsx
View File

@@ -31,7 +31,7 @@ export default function InteractiveMap({
}: InteractiveMapProps) { }: InteractiveMapProps) {
const intl = useIntl() const intl = useIntl()
const map = useMap() const map = useMap()
const [hasFittedBounds, setHasFittedBounds] = useState(false) const [hasInitializedBounds, setHasInitializedBounds] = useState(false)
const mapOptions: MapProps = { const mapOptions: MapProps = {
defaultZoom: 14, defaultZoom: 14,
@@ -57,15 +57,18 @@ export default function InteractiveMap({
} }
useEffect(() => { useEffect(() => {
if (map && fitBounds && hotelPins?.length && !hasFittedBounds) { if (map && hotelPins?.length && !hasInitializedBounds) {
const bounds = new google.maps.LatLngBounds() if (fitBounds) {
hotelPins.forEach((marker) => { const bounds = new google.maps.LatLngBounds()
bounds.extend(marker.coordinates) hotelPins.forEach((marker) => {
}) bounds.extend(marker.coordinates)
map.fitBounds(bounds, 100) })
setHasFittedBounds(true)
map.fitBounds(bounds, 100)
}
setHasInitializedBounds(true)
} }
}, [map, fitBounds, hotelPins, hasFittedBounds]) }, [map, fitBounds, hotelPins, hasInitializedBounds])
return ( return (
<div className={styles.mapContainer}> <div className={styles.mapContainer}>