update feature to work with full screen map

bettersg · Oct 16, 2023 · 98bae5e · 98bae5e
1 parent e5214bf
commit 98bae5e
Showing 1 changed file with 66 additions and 71 deletions.
diff --git a/client/spa-pages/components/MapPage.tsx b/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),
 	);
 
@@ -304,6 +304,52 @@ const MapInner = ({ setPage }: Props) => {
 		<BasePage title="Instructions" description="Singapore's first recycling planner">
 			<NonRecyclableModal setPage={setPage} items={items} getItemCategory={getItemCategory} />
 			<Box height="calc(100vh - 80px)" position="relative">
+				{/* Map Display */}
+				<Box
+					transition="opacity 0.3s"
+					opacity={isLoading ? 0 : 1}
+					onClick={() => setFacCardIsOpen(false)}
+					position="absolute"
+					height="100%"
+					width="100%"
+					left={0}
+					top={0}
+					zIndex={0}
+				>
+					<LeafletMap center={centerPos} zoom={zoom} minZoom={11} maxZoom={18}>
+						{/* The color is the background color of the cluster */}
+						<Cluster icon={ClusterIcon} color={"#81C784"} chunkedLoading>
+							{locations &&
+								// ClothingType will be used to show relevant icon
+								Object.entries(locations).map(([category, result]) => {
+									return result.facilities.map((facility) => {
+										return (
+											<CustomMarker
+												key={facility.id}
+												position={facility.latlng as LatLngExpression}
+												icon={GeneralIcon}
+												color={"#FFFFFF"}
+												handleOnClick={() => handleMarkerOnClick(facility)}
+												category={category}
+												isSelected={
+													facCardIsOpen &&
+													facCardDetails?.id === facility.id
+												}
+											/>
+										);
+									});
+								})}
+						</Cluster>
+						{/* Center Marker */}
+						<CustomMarker
+							position={centerPos}
+							icon={UserIcon}
+							color={"#FF0000"}
+							handleOnClick={() => setFacCardIsOpen(false)}
+						/>
+					</LeafletMap>
+				</Box>
+
 				<VStack
 					width="100%"
 					maxW={{
@@ -340,75 +386,24 @@ const MapInner = ({ setPage }: Props) => {
 							}),
 						}}
 					/>
-					{/* Map Display */}
-					<Box overflow="hidden" width="100%" height={isMobile ? "70vh" : "80vh"}>
-						<Box
-							left={0}
-							transition="opacity 0.3s"
-							opacity={isLoading ? 0 : 1}
-							top={80}
-							// This was in the reference code
-							width={viewportWidth ?? "100%"}
-							height={viewportHeight ? viewportHeight - 80 : "100%"}
-							onClick={() => setFacCardIsOpen(false)}
-						>
-							<LeafletMap center={centerPos} zoom={zoom} minZoom={11} maxZoom={18}>
-								{/* The color is the background color of the cluster */}
-								<Cluster icon={ClusterIcon} color={"#81C784"} chunkedLoading>
-									{locations &&
-										// ClothingType will be used to show relevant icon
-										Object.entries(locations).map(([category, result]) => {
-											return result.facilities.map((facility) => {
-												return (
-													<CustomMarker
-														key={facility.id}
-														position={
-															facility.latlng as LatLngExpression
-														}
-														icon={GeneralIcon}
-														color={"#FFFFFF"}
-														handleOnClick={() =>
-															handleMarkerOnClick(facility)
-														}
-														category={category}
-														isSelected={
-															facCardIsOpen &&
-															facCardDetails?.id === facility.id
-														}
-													/>
-												);
-											});
-										})}
-								</Cluster>
-								{/* Center Marker */}
-								<CustomMarker
-									position={centerPos}
-									icon={UserIcon}
-									color={"#FF0000"}
-									handleOnClick={() => setFacCardIsOpen(false)}
-								/>
-							</LeafletMap>
-						</Box>
-					</Box>
-
-					{/* Facility Card */}
-					{facCardIsOpen &&
-						(isMobile ? (
-							<FacilityCard
-								facCardDetails={facCardDetails}
-								facCardDistance={facCardDistance}
-								width={"86%"}
-								left={"7%"}
-							/>
-						) : (
-							<FacilityCard
-								facCardDetails={facCardDetails}
-								facCardDistance={facCardDistance}
-								width={"50%"}
-								left={"25%"}
-							/>
-						))}
 				</VStack>
+
+				{facCardIsOpen &&
+					(isMobile ? (
+						<FacilityCard
+							facCardDetails={facCardDetails}
+							facCardDistance={facCardDistance}
+							width={"86%"}
+							left={"7%"}
+						/>
+					) : (
+						<FacilityCard
+							facCardDetails={facCardDetails}
+							facCardDistance={facCardDistance}
+							width={"50%"}
+							left={"25%"}
+						/>
+					))}
 			</Box>
 
 			{/* Keeping this for future implementations of similar idea */}