@abcagency/hc-ui-components 1.3.71 → 1.3.73

package/src/components/containers/maps/map-container.js

@@ -1,249 +1,299 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import MapMarker from "~/components/containers/maps/map-marker-container";
-import PlaceMarker from "~/components/modules/maps/place-marker";
-
-import { usePlaces } from "~/contexts/placesContext";
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-
-import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
-
-import Map from "~/components/modules/maps/map";
-import { MarkerClustererF } from "@react-google-maps/api";
-import { clusterOptions } from "~/util/mapUtil";
-
-const MapContainer = ({
-	markerConfigs,
-	infoWindowClasses,
-	clusterGridSize = 60
-}) => {
-	const {
-		location,
-		zoom,
-		center,
-		selectLocationEntity,
-		setLocation,
-		mapInteracted,
-		setMapInteracted
-	} = useMap();
-
-	const {
-		mapItems, filteredListings, setSelectedFilters,
-		setQuery,
-		siteConfig
-	} = useMapList();
-
-	const mapRef = useRef();
-	const markerRefs = useRef({});
-	const mapContainerRef = useRef(null);
-	const {
-		poiMarkers,
-		setCurrentCenter,
-		currentCenter,
-		setCurrentZoom,
-		currentZoom,
-		selectedPlaceMarker,
-		setSelectedPlaceMarker,
-		placesWindow,
-		setPlacesWindow } = usePlaces();
-
-	const onIdle = () => {
-		if (!currentCenter || !mapRef.current) return;
-		const newCenter = mapRef.current.getCenter().toJSON();
-		const newZoom = mapRef.current.zoom;
-
-		setCurrentCenter(newCenter);
-
-		if (newZoom !== currentZoom) {
-			setCurrentZoom(newZoom);
-		}
-	};
-
-	useEffect(() => {
-		if (mapContainerRef.current) {
-			const handleScroll = () => {
-				setMapInteracted(true);
-			};
-			var mapContainerRefCurrent = mapContainerRef.current;
-			mapContainerRef.current.addEventListener('wheel', handleScroll);
-			return () => mapContainerRefCurrent.removeEventListener('wheel', handleScroll);
-		}
-	}, [mapContainerRef.current]);
-
-	useEffect(() => {
-		if (mapRef.current) {
-			const mapInstance = mapRef.current;
-			const dragStartListener = mapInstance.addListener('dragstart', () => setMapInteracted(true));
-			const mouseDownListener = mapInstance.addListener('mousedown', () => setMapInteracted(true));
-			return () => {
-				google.maps.event.removeListener(dragStartListener);
-				google.maps.event.removeListener(mouseDownListener);
-			};
-		}
-	}, [mapRef.current, mapContainerRef.current]);
-
-	useEffect(() => {
-		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current) {
-			fitBounds(mapRef.current);
-		}
-	}, [mapItems, mapRef.current, location]);
-
-	useEffect(() => {
-		if ((mapItems && mapItems.length > 0 || poiMarkers.length > 0) && mapRef.current && mapInteracted) {
-			fitBounds(mapRef.current, true);
-		}
-		if (mapRef.current) {
-			let currZoom = mapRef.current.zoom;
-			let setZoomVal = currZoom < 13 ? currZoom : 12;
-			mapRef.current.setZoom(setZoomVal);
-		}
-	}, [filteredListings]);
-
-	useEffect(() => {
-		if (!mapRef.current || !location || mapInteracted) return;
-		mapRef.current.panTo(
-			new google.maps.LatLng(location.latitude, location.longitude)
-		);
-		if (mapRef.current) {
-			let setZoomVal = zoom < 13 ? zoom : 12;
-			mapRef.current.setZoom(setZoomVal);
-		}
-	}, [location, zoom, mapRef.current]);
-
-	const fitBounds = (map, overload = false) => {
-		if ((mapInteracted === false || overload) && mapItems != null) {
-		  const bounds = new window.google.maps.LatLngBounds();
-		  mapItems.forEach(item => {
-				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
-		  });
-		  if(siteConfig.optionalShowLocationClusterConfig){
-				let configLocation = new google.maps.LatLng(siteConfig.optionalShowLocationClusterConfig.latitude, siteConfig.optionalShowLocationClusterConfig.longitude);
-				map.panTo(configLocation);
-				bounds.extend(new google.maps.LatLng(siteConfig.optionalShowLocationClusterConfig.latitude, siteConfig.optionalShowLocationClusterConfig.longitude));
-		  }
-		  if (!map) return;
-		  const currentCenter = map.getCenter();
-		  map.fitBounds(bounds);
-		  const newCenter = bounds.getCenter();
-		  if (currentCenter && newCenter) {
-				map.panTo(newCenter);
-		  }
-		}
-		if (mapRef.current.zoom > 17) {
-		  mapRef.current.setZoom(16);
-		}
-	  };
-
-	const markerClickHandler = mapLocation => {
-		setMapInteracted(true);
-		selectLocationEntity(mapLocation);
-	};
-
-	const onLoad = map => {
-		if (!location || location === null) {
-			mapRef.current = map;
-			fitBounds(map, true);
-			return;
-		}
-		mapRef.current = map;
-
-		if (mapInteracted === false) {
-			mapRef.current.panTo(
-				new google.maps.LatLng(location.latitude, location.longitude)
-			);
-
-			mapRef.current.setZoom(zoom);
-		}
-	};
-
-	const pinIconUrl = pinIcon({
-		fillColor: markerConfigs.fillColor,
-		strokeColor: markerConfigs.strokeColor
-	});
-
-	const onClusterClick = cluster => {
-		if(!siteConfig.optionalShowLocationClusterConfig || (mapRef.current.zoom > siteConfig.optionalShowLocationClusterConfig.showForZoomLevelLessThan)) {
-			console.log("should return");
-			return;
-		}
-		if (!cluster || typeof cluster.getMarkers !== 'function') {
-		  console.error('Cluster object or getMarkers method not available.');
-		  return;
-		}
-
-		const markers = cluster.getMarkers();
-
-		if (!markers || markers.length === 0) {
-		  console.error('No markers found in the cluster.');
-		  return;
-		}
-
-		setTimeout(() => {
-		  const bounds = new window.google.maps.LatLngBounds();
-
-		  markers.forEach(marker => {
-				bounds.extend(marker.getPosition());
-		  });
-
-		  bounds.extend(new google.maps.LatLng(siteConfig.optionalShowLocationClusterConfig.latitude, siteConfig.optionalShowLocationClusterConfig.longitude));
-
-		  if (mapRef.current) {
-				mapRef.current.fitBounds(bounds);
-		  }
-		}, 500);
-	  };
-
-	return (
-		<Map
-			zoom={zoom}
-			center={center}
-			mapContainerRef={mapContainerRef}
-			onLoad={onLoad}
-			onIdle={onIdle}
-			mapInteracted={mapInteracted}
-			pinIconUrl={pinIconUrl}
-			setMapInteracted={setMapInteracted}
-			fitBounds={fitBounds}
-			mapRef={mapRef}
-			setQuery={setQuery}
-			filteredListingsLength={filteredListings.length}
-			setSelectedFilters={setSelectedFilters}
-		>
-			<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)} onClick={onClusterClick}>
-				{clusterer => (
-					<>
-						{mapItems.map(item => (
-							<MapMarker
-								key={item.id}
-								item={item}
-								selectedLocation={location}
-								markerRefs={markerRefs}
-								infoWindowClasses={infoWindowClasses}
-								setSelectedLocation={setLocation}
-								markerClickHandler={markerClickHandler}
-								clusterer={clusterer}
-								markerIcon={markerIcon(markerConfigs)}
-								markerIconSelected={markerIconSelected(markerConfigs)}
-								setMapInteracted={setMapInteracted}
-							/>
-						))}
-						{poiMarkers && poiMarkers.markers.map((marker, index) => (
-							<PlaceMarker
-								key={`marker-${marker.title}-${index}`}
-								marker={marker}
-								index={index}
-								selectedPlaceMarker={selectedPlaceMarker}
-								placesWindow={placesWindow}
-								setPlacesWindow={setPlacesWindow}
-								setSelectedPlaceMarker={setSelectedPlaceMarker}
-							  />
-						))}
-					</>
-				)}
-			</MarkerClustererF>
-		</Map>
-	);
-};
-
-export default MapContainer;
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+import MapMarker from "~/components/containers/maps/map-marker-container";
+import PlaceMarker from "~/components/modules/maps/place-marker";
+
+import { usePlaces } from "~/contexts/placesContext";
+import { useMap } from "~/contexts/mapContext";
+import { useMapList } from "~/contexts/mapListContext";
+
+import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
+
+import Map from "~/components/modules/maps/map";
+import { MarkerClustererF, Marker } from "@react-google-maps/api";
+import { clusterOptions } from "~/util/mapUtil";
+
+const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }) => {
+	const { location, zoom, center, selectLocationEntity, setLocation, mapInteracted, setMapInteracted, defaultZoomOverride } = useMap();
+
+	const { mapItems, filteredListings, setSelectedFilters, setQuery, siteConfig } = useMapList();
+
+	const mapRef = useRef();
+	const markerRefs = useRef({});
+	const mapContainerRef = useRef(null);
+	const {
+		poiMarkers,
+		setCurrentCenter,
+		currentCenter,
+		setCurrentZoom,
+		currentZoom,
+		selectedPlaceMarker,
+		setSelectedPlaceMarker,
+		placesWindow,
+		setPlacesWindow,
+		additionalMapMarkers
+	} = usePlaces();
+
+	const onIdle = () => {
+		if (!currentCenter || !mapRef.current) return;
+		const newCenter = mapRef.current.getCenter().toJSON();
+		const newZoom = mapRef.current.zoom;
+
+		setCurrentCenter(newCenter);
+
+		if (newZoom !== currentZoom) {
+			setCurrentZoom(newZoom);
+		}
+	};
+
+	useEffect(() => {
+		if (mapContainerRef.current) {
+			const handleScroll = () => {
+				setMapInteracted(true);
+			};
+			var mapContainerRefCurrent = mapContainerRef.current;
+			mapContainerRef.current.addEventListener("wheel", handleScroll);
+			return () => mapContainerRefCurrent.removeEventListener("wheel", handleScroll);
+		}
+	}, [mapContainerRef.current]);
+
+	useEffect(() => {
+		if(mapRef.current && defaultZoomOverride && !mapInteracted && !location){
+			mapRef.current.setZoom(defaultZoomOverride);
+		}
+	}, [mapInteracted]);
+
+	useEffect(() => {
+		if (mapRef.current) {
+			const mapInstance = mapRef.current;
+			const dragStartListener = mapInstance.addListener("dragstart", () => setMapInteracted(true));
+			const mouseDownListener = mapInstance.addListener("mousedown", () => setMapInteracted(true));
+			return () => {
+				google.maps.event.removeListener(dragStartListener);
+				google.maps.event.removeListener(mouseDownListener);
+			};
+		}
+	}, [mapRef.current, mapContainerRef.current]);
+
+	useEffect(() => {
+		if (((mapItems && mapItems.length > 0) || poiMarkers.length > 0) && mapRef.current) {
+			fitBounds(mapRef.current);
+		}
+	}, [mapItems, mapRef.current, location]);
+
+	useEffect(() => {
+		if (((mapItems && mapItems.length > 0) || poiMarkers.length > 0) && mapRef.current && mapInteracted) {
+			fitBounds(mapRef.current, true);
+		}
+		if (mapRef.current) {
+			const currZoom = mapRef.current.zoom;
+			const setZoomVal = currZoom < 13 ? currZoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [filteredListings]);
+
+	useEffect(() => {
+		if (!mapRef.current || !location || mapInteracted) return;
+		mapRef.current.panTo(new google.maps.LatLng(location.latitude, location.longitude));
+		if (mapRef.current) {
+			const setZoomVal = zoom < 13 ? zoom : 12;
+			mapRef.current.setZoom(setZoomVal);
+		}
+	}, [location, zoom, mapRef.current]);
+
+	const fitBounds = (map, overload = false) => {
+		if ((mapInteracted === false || overload) && mapItems != null) {
+			const bounds = new window.google.maps.LatLngBounds();
+			mapItems.forEach(item => {
+				bounds.extend(new google.maps.LatLng(item.latitude, item.longitude));
+			});
+			if (siteConfig.optionalShowLocationClusterConfig) {
+				const configLocation = new google.maps.LatLng(
+					siteConfig.optionalShowLocationClusterConfig.latitude,
+					siteConfig.optionalShowLocationClusterConfig.longitude
+				);
+				map.panTo(configLocation);
+				bounds.extend(
+					new google.maps.LatLng(
+						siteConfig.optionalShowLocationClusterConfig.latitude,
+						siteConfig.optionalShowLocationClusterConfig.longitude
+					)
+				);
+			}
+			if (!map) return;
+			const currentCenter = map.getCenter();
+			map.fitBounds(bounds);
+			const newCenter = bounds.getCenter();
+			if (currentCenter && newCenter) {
+				map.panTo(newCenter);
+			}
+		}
+		if(defaultZoomOverride && !mapInteracted && !location){
+			mapRef.current.setZoom(defaultZoomOverride);
+		}
+		else if (mapRef.current.zoom > 17) {
+			mapRef.current.setZoom(16);
+		}
+	};
+
+	const markerClickHandler = mapLocation => {
+		setMapInteracted(true);
+		selectLocationEntity(mapLocation);
+	};
+
+	const onLoad = map => {
+		if (!location || location === null) {
+			mapRef.current = map;
+			fitBounds(map, true);
+			return;
+		}
+		mapRef.current = map;
+
+		if (mapInteracted === false) {
+			mapRef.current.panTo(new google.maps.LatLng(location.latitude, location.longitude));
+
+			mapRef.current.setZoom(zoom);
+		}
+	};
+
+	const pinIconUrl = pinIcon({
+		fillColor: markerConfigs.fillColor,
+		strokeColor: markerConfigs.strokeColor
+	});
+
+	const onClusterClick = cluster => {
+		if (
+			!siteConfig.optionalShowLocationClusterConfig ||
+      mapRef.current.zoom > siteConfig.optionalShowLocationClusterConfig.showForZoomLevelLessThan
+		) {
+			return;
+		}
+		if (!cluster || typeof cluster.getMarkers !== "function") {
+			console.error("Cluster object or getMarkers method not available.");
+			return;
+		}
+
+		const markers = cluster.getMarkers();
+
+		if (!markers || markers.length === 0) {
+			console.error("No markers found in the cluster.");
+			return;
+		}
+
+		setTimeout(() => {
+			const bounds = new window.google.maps.LatLngBounds();
+
+			markers.forEach(marker => {
+				bounds.extend(marker.getPosition());
+			});
+
+			bounds.extend(
+				new google.maps.LatLng(
+					siteConfig.optionalShowLocationClusterConfig.latitude,
+					siteConfig.optionalShowLocationClusterConfig.longitude
+				)
+			);
+
+			if (mapRef.current) {
+				mapRef.current.fitBounds(bounds);
+			}
+		}, 500);
+	};
+
+	console.log(mapItems);
+
+	return (
+		<Map
+			zoom={zoom}
+			center={center}
+			mapContainerRef={mapContainerRef}
+			onLoad={onLoad}
+			onIdle={onIdle}
+			mapInteracted={mapInteracted}
+			pinIconUrl={pinIconUrl}
+			setMapInteracted={setMapInteracted}
+			fitBounds={fitBounds}
+			mapRef={mapRef}
+			setQuery={setQuery}
+			filteredListingsLength={filteredListings.length}
+			setSelectedFilters={setSelectedFilters}
+		>
+			<MarkerClustererF
+			 		calculator={markers => {
+					const totalCount = markers.reduce((sum, marker) => sum + (marker.get("count") || 1), 0);
+
+					return {
+						text: totalCount.toString(),
+						index: Math.min(5, Math.floor(totalCount / 10))
+					};}}
+				options={{
+					...clusterOptions(clusterGridSize, markerConfigs.fillColor)
+
+				}}
+				onClick={onClusterClick}
+			>
+
+				{clusterer => (
+					<>
+						{mapItems.map(item => {
+							let markerCount = Object.values(item.items).length;
+							return (
+								<MapMarker
+									key={item.id}
+									item={item}
+									selectedLocation={location}
+									markerRefs={markerRefs}
+									infoWindowClasses={infoWindowClasses}
+									setSelectedLocation={setLocation}
+									markerClickHandler={markerClickHandler}
+									clusterer={clusterer}
+									markerIcon={markerIcon(markerConfigs, markerCount)}
+									markerIconSelected={markerIconSelected(markerConfigs, markerCount)}
+									setMapInteracted={setMapInteracted}
+								/>
+							);}
+						)}
+
+						{/* Make sure MapMarker component passes the item data to the marker object */}
+						{/* You may need to modify the MapMarker component to attach the item data to the marker */}
+
+						{additionalMapMarkers &&
+              additionalMapMarkers.map(
+              	(marker, index) =>
+              		currentZoom >= marker.minZoom &&
+                  currentZoom <= marker.maxZoom && (
+              			<Marker
+              				key={`marker-${marker.title}-${index}`}
+              				position={marker.position}
+              				title={marker.title}
+              				icon={{
+              					url: marker.iconUrl,
+              					scaledSize: new window.google.maps.Size(40, 40)
+              				}}
+              			/>
+              		)
+              )}
+
+						{poiMarkers &&
+              poiMarkers.markers.map((marker, index) => (
+              	<PlaceMarker
+              		key={`marker-${marker.title}-${index}`}
+              		marker={marker}
+              		index={index}
+              		selectedPlaceMarker={selectedPlaceMarker}
+              		placesWindow={placesWindow}
+              		setPlacesWindow={setPlacesWindow}
+              		setSelectedPlaceMarker={setSelectedPlaceMarker}
+              	/>
+              ))}
+					</>
+				)}
+			</MarkerClustererF>
+		</Map>
+	);
+};
+
+export default MapContainer;
+

package/src/components/containers/maps/map-list-container.js

@@ -1,52 +1,52 @@
-import React from 'react';
-
-import List from '~/components/containers/list/item-list-container';
-import Map from '~/components/containers/maps/map-container';
-import Filter from '~/components/containers/filter/filter-container';
-import MapList from '~/components/modules/maps/map-list';
-
-const MapListContainer = ({
-	loading = false,
-	containerStyle,
-	mapDetails,
-	markerConfigs,
-	itemExpandedContent,
-	fieldsShown,
-	specialFeatures,
-	fieldNames,
-	showMap,
-	placeMappings,
-	mapPosition
-}) => {
-
-	const listProps = {
-		fieldsShown,
-		fieldNames,
-		itemExpandedContent,
-		loading,
-		showMap,
-		specialFeatures
-	};
-
-	const mapProps = {
-		mapDetails,
-		markerConfigs,
-		placeMappings,
-		clusterGridSize: 60,
-		showMap
-	};
-
-	return (
-		<MapList
-			showMap={showMap}
-			containerStyle={containerStyle}
-			loading={loading}
-			list={<List {...listProps} />}
-			map={<Map {...mapProps} />}
-			filter={<Filter showMap={showMap} className="md:hc-hidden" />}
-			mapPosition={mapPosition}
-		/>
-	);
-};
-
-export default MapListContainer;
+import React from 'react';
+
+import List from '~/components/containers/list/item-list-container';
+import Map from '~/components/containers/maps/map-container';
+import Filter from '~/components/containers/filter/filter-container';
+import MapList from '~/components/modules/maps/map-list';
+
+const MapListContainer = ({
+	loading = false,
+	containerStyle,
+	mapDetails,
+	markerConfigs,
+	itemExpandedContent,
+	fieldsShown,
+	specialFeatures,
+	fieldNames,
+	showMap,
+	placeMappings,
+	mapPosition
+}) => {
+
+	const listProps = {
+		fieldsShown,
+		fieldNames,
+		itemExpandedContent,
+		loading,
+		showMap,
+		specialFeatures
+	};
+
+	const mapProps = {
+		mapDetails,
+		markerConfigs,
+		placeMappings,
+		clusterGridSize: 60,
+		showMap
+	};
+
+	return (
+		<MapList
+			showMap={showMap}
+			containerStyle={containerStyle}
+			loading={loading}
+			list={<List {...listProps} />}
+			map={<Map {...mapProps} />}
+			filter={<Filter showMap={showMap} className="md:hc-hidden" />}
+			mapPosition={mapPosition}
+		/>
+	);
+};
+
+export default MapListContainer;