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

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

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