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>
))}