Merge pull request #193 from bettersg/feature/176-enlarge-marker-when…

…-pressed

Enlarge marker when pressed

client/components/map/Marker/ClusterGroup.tsx

@@ -52,8 +52,6 @@ const CreateMarkerClusterGroup = (
 						label={`${cluster.getChildCount()}`}
 					/>
 				),
-				// The offset of the marker from the original lat/long??
-				anchor: [17, 18],
 			}),
 		...props,
 	});

client/components/map/Marker/MarkerIconWrapper.tsx

@@ -11,71 +11,34 @@ export interface CustomMarkerProps {
 	color: string;
 	label?: string;
 	category: string;
+	isSelected?: boolean;
 }
 
 const MarkerIconWrapper = ({
 	icon: IconFC,
 	color,
 	label,
 	category,
+	isSelected = false,
 }: Partial<CustomMarkerProps>) => {
 	return (
-		<Box position={"relative"} padding={0} margin={0} className="inline-flex ">
-			{label && (
-				<Box
-					position={"absolute"}
-					rounded={"full"}
-					className="-inset-2 opacity-40"
-					style={{ background: "rgba(0,0,0,0)" }}
-				/>
-			)}
+		<Box className={`marker-icon-wrapper ${isSelected ? "selected" : ""}`}>
+			{IconFC &&
+				(label ? (
+					<IconFC className="cluster-marker-size" />
+				) : (
+					<IconFC className="marker-size" />
+				))}
 
-			<Box
-				padding={2}
-				rounded={"full"}
-				position={"relative"}
-				className="inline-block"
-				style={{ background: "rgba(0,0,0,0)" }}
-			>
-				{IconFC &&
-					(label ? (
-						<IconFC className="cluster-marker-size" viewBox="0 0 60 83" />
-					) : (
-						<IconFC className="marker-size" viewBox="0 0 50 70" />
-					))}
-				{label && (
-					<Box
-						position={"relative"}
-						top={2}
-						// right={-2}
-						border={-2}
-						borderColor={"white"}
-						rounded={"full"}
-						height={8}
-						width={20}
-						alignItems={"center"}
-						justifyContent={"end"}
-						paddingTop={1}
-						backgroundColor={color}
-					>
-						<Text className="marker-text">{label}</Text>
-					</Box>
-				)}
+			{label && <Text className="marker-text">{label}</Text>}
 
-				{category && (
-					<Image
-						className="marker-image"
-						src={`/icons/${category}.png`}
-						alt={`${category} icon`}
-					/>
-				)}
-			</Box>
-			<Box
-				position={"absolute"}
-				rounded={"full"}
-				boxShadow={"md"}
-				className={`${label ? "-inset-2" : "-inset-1"}`}
-			/>
+			{category && (
+				<Image
+					className="marker-image"
+					src={`/icons/${category}.png`}
+					alt={`${category} icon`}
+				/>
+			)}
 		</Box>
 	);
 };

client/components/map/Marker/icons/ClusterIcon.tsx

@@ -1,7 +1,7 @@
 import { Icon } from "@chakra-ui/react";
 
 const ClusterIcon = (props: any) => (
-	<Icon viewBox="0 0 200 200" {...props}>
+	<Icon viewBox="0 0 60 83" {...props}>
 		<path
 			d="M29 77.8903C12.3318 61.8834 4 50.6184 4 39.414C4 32.4086 6.63392 25.6901 11.3223 20.7365C16.0107 15.7829 22.3696 13 29 13C35.6304 13 41.9893 15.7829 46.6777 20.7365C51.3661 25.6901 54 32.4086 54 39.414C54 50.6184 45.6682 61.8834 29 77.8903Z"
 			fill="#004BBB"

client/components/map/Marker/icons/GeneralIcon.tsx

@@ -1,9 +1,8 @@
 import { Icon } from "@chakra-ui/react";
-import { IconProps } from "@chakra-ui/icons";
 
 // Map Icon (placeholder for testing)
 const GeneralIcon = (props: any) => (
-	<Icon viewBox="0 0 200 200" {...props}>
+	<Icon viewBox="0 0 58 72" {...props}>
 		<path
 			d="M29 65.8903C12.3318 49.8834 4 38.6184 4 27.414C4 20.4086 6.63392 13.6901 11.3223 8.7365C16.0107 3.7829 22.3696 1 29 1C35.6304 1 41.9893 3.7829 46.6777 8.7365C51.3661 13.6901 54 20.4086 54 27.414C54 38.6184 45.6682 49.8834 29 65.8903Z"
 			fill="#004BBB"

client/components/map/Marker/icons/UserIcon.tsx

@@ -1,9 +1,8 @@
 import { Icon } from "@chakra-ui/react";
-import { IconProps } from "@chakra-ui/icons";
 
 // Map Icon (placeholder for testing)
 const UserIcon = (props: any) => (
-	<Icon viewBox="0 0 200 200" {...props}>
+	<Icon viewBox="0 0 50 71" {...props}>
 		<path
 			d="M25 64.8903C8.33182 48.8834 0 37.6184 0 26.414C0 19.4086 2.63392 12.6901 7.32233 7.7365C12.0107 2.7829 18.3696 0 25 0C31.6304 0 37.9893 2.7829 42.6777 7.7365C47.3661 12.6901 50 19.4086 50 26.414C50 37.6184 41.6682 48.8834 25 64.8903Z"
 			fill="#DD0303"

client/components/map/Marker/index.tsx

@@ -9,15 +9,22 @@ export const CustomMarker: React.FC<{
 	color: CustomMarkerProps["color"];
 	handleOnClick: () => void;
 	category?: string;
-}> = ({ position, icon, color, handleOnClick, category }) => {
+	isSelected?: boolean;
+}> = ({ position, icon, color, handleOnClick, category, isSelected }) => {
 	const { divIcon } = useLeafletDivIcon();
 
 	return (
 		<Marker
 			position={position}
 			icon={divIcon({
-				source: <MarkerIconWrapper color={color} icon={icon} category={category} />,
-				anchor: [13, 11],
+				source: (
+					<MarkerIconWrapper
+						color={color}
+						icon={icon}
+						category={category}
+						isSelected={isSelected}
+					/>
+				),
 			})}
 			eventHandlers={{ click: handleOnClick }}
 		/>

client/hooks/useLeafletDivIcon.tsx

@@ -1,18 +1,16 @@
-import Leaflet, { PointExpression } from "leaflet";
+import Leaflet from "leaflet";
 import { renderToString } from "react-dom/server";
 
 interface divIconValues {
 	source: JSX.Element;
-	anchor: PointExpression;
 }
 
 const useLeafletDivIcon = () => {
-	const divIcon = ({ source, anchor }: divIconValues) =>
+	const divIcon = ({ source }: divIconValues) =>
 		Leaflet?.divIcon({
 			html: renderToString(source),
-			iconAnchor: anchor,
 		});
-
 	return { divIcon };
 };
+
 export default useLeafletDivIcon;

client/public/Marker.css

@@ -1,13 +1,25 @@
 .leaflet-marker-icon {
-	border: 0cm;
-	background: rgba(0, 0, 0, 0);
+  background: transparent;
+  border: none;
+}
+
+.marker-icon-wrapper {
+  position: absolute;
+  bottom: 6px;
+  left: 6px;
+  transform: translateX(-50%);
+}
+
+.marker-icon-wrapper.selected {
+  transform-origin: bottom left;
+  scale: 2;
 }
 
 .marker-text {
 	font-size: 9px;
 	position: absolute;
-	left: 30.5px;
-	bottom: -3.5px;
+	right: 7px;
+	top: 0;
 	color: white;
 }
 
@@ -22,9 +34,13 @@
 }
 
 .marker-image {
-	width: 13px !important;
-	height: 13px;
 	position: absolute;
-	left: 13px;
-	top: 6px;
+  width: 36% !important;
+
+  /* center icon in marker */
+  top: 18%;
+
+  /* center icon based on percentage width */
+  /* (100 - %width) / 2 * 100 / %width */
+  transform: translateX(88.888%);
 }

client/spa-pages/components/MapPage.tsx

@@ -129,9 +129,9 @@ const MapInner = ({ setPage }: Props) => {
 	const [centerPos, setCenterPos] = useState<LatLngExpression>(
 		address.value !== ""
 			? ([
-				parseFloat(address.coordinates.lat),
-				parseFloat(address.coordinates.long),
-			] as LatLngExpression)
+					parseFloat(address.coordinates.lat),
+					parseFloat(address.coordinates.long),
+			  ] as LatLngExpression)
 			: ([1.376690088473865, 103.7993060574394] as LatLngExpression),
 	);
 
@@ -331,6 +331,10 @@ const MapInner = ({ setPage }: Props) => {
 												color={"#FFFFFF"}
 												handleOnClick={() => handleMarkerOnClick(facility)}
 												category={category}
+												isSelected={
+													facCardIsOpen &&
+													facCardDetails?.id === facility.id
+												}
 											/>
 										);
 									});