diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/index.tsx index a830c31e6..994e0d36b 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/index.tsx @@ -19,6 +19,7 @@ import type { interface MapContentProps { geojson: MarkerGeojson + hasActiveFilters?: boolean } // Important this is outside the component to avoid re-creating the object on each render @@ -29,14 +30,21 @@ const CLUSTER_OPTIONS = { maxZoom: 14, } -export default function MapContent({ geojson }: MapContentProps) { +export default function MapContent({ + geojson, + hasActiveFilters, +}: MapContentProps) { const { setClickedHotel, clickedHotel } = useDestinationPageHotelsMapStore() const map = useMap() + const { clusters, containedHotels } = useSupercluster( 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 (clickedHotel) { @@ -53,11 +61,11 @@ export default function MapContent({ geojson }: MapContentProps) { } } - return clusters.map((feature, idx) => { + return markerList.map((feature, idx) => { const [lng, lat] = feature.geometry.coordinates const clusterProperties = feature.properties as ClusterProperties const markerProperties = feature.properties as MarkerProperties - const isCluster = clusterProperties.cluster + const isCluster = clusterProperties?.cluster return isCluster ? ( ({ + activeFilters: state.activeFilters, + })) + + const hasActiveFilters = activeFilters.length > 0 + const markers = getHotelMapMarkers(hotels) const geoJson = mapMarkerDataToGeoJson(markers) const defaultCoordinates = defaultLocation @@ -150,7 +158,10 @@ export default function Map({ defaultCoordinates={defaultCoordinates} defaultZoom={defaultZoom} > - +