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

Merged in feat/SW-2511-hotel-page-map (pull request #2582)

Browse Source 
feat(SW-2511): hotel page map and marker improvements

* feat(SW-2511): update hotel page map

* fix(SW-2511): fix issue with identical id's for POIs


Approved-by: Anton Gunnarsson
This commit is contained in:
Matilda Landström
2025-07-31 09:06:48 +00:00
parent ace44d00dc
commit e323ca9914
20 changed files with 139 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,8 +4,7 @@ import {
} from "@vis.gl/react-google-maps"
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { Typography } from "@scandic-hotels/design-system/Typography"
import HotelMarkerByType from "../../Markers"
import PoiMarker from "../../Markers/Poi"
@@ -46,7 +45,7 @@ export default function PoiMapMarkers({
{pointsOfInterest.map((poi) => (
<AdvancedMarker
key={poi.name}
key={poi.name + poi.categoryName}
className={styles.advancedMarker}
position={poi.coordinates}
anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
@@ -61,25 +60,28 @@ export default function PoiMapMarkers({
<PoiMarker
group={poi.group}
categoryName={poi.categoryName}
size={activePoi === poi.name ? 20 : 16}
size={activePoi === poi.name ? "large" : "small"}
/>
<Body className={styles.poiLabel} asChild>
<span>
{poi.name}
<Caption asChild>
<span>
{intl.formatMessage(
{
defaultMessage: "{distanceInKm} km",
},
{
distanceInKm: poi.distance,
}
)}
</span>
</Caption>
</span>
</Body>
<span className={styles.poiLabel}>
<Typography variant="Body/Paragraph/mdRegular">
<span>{poi.name}</span>
</Typography>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.distance}
>
<span>
{intl.formatMessage(
{
defaultMessage: "{distanceInKm} km",
},
{
distanceInKm: poi.distance,
}
)}
</span>
</Typography>
</span>
</span>
</AdvancedMarker>
))}

22
apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/poiMapMarkers.module.css
View File

@@ -1,14 +1,14 @@
.advancedMarker {
height: var(--Spacing-x4);
height: var(--Space-x4);
width: var(
--Spacing-x4
--Space-x4
) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
}
.advancedMarker.active {
height: var(--Spacing-x5);
height: var(--Space-x5);
width: var(
--Spacing-x5
--Space-x5
) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
}
@@ -19,15 +19,15 @@
display: flex;
justify-content: center;
align-items: center;
padding: var(--Spacing-x-half);
padding: var(--Space-x05);
border-radius: var(--Corner-radius-rounded);
background-color: var(--Base-Surface-Primary-light-Normal);
background-color: var(--Surface-UI-Fill-Default);
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
.poi.active {
padding-right: var(--Spacing-x-one-and-half);
padding-right: var(--Space-x15);
}
.poiLabel {
@@ -37,6 +37,10 @@
.poi.active .poiLabel {
display: flex;
align-items: center;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
text-wrap: nowrap;
}
.distance {
color: var(--Text-Secondary);
}