💄 Increase default zoom & prepare click tooltip

app/hooks/useActions.ts

@@ -1,7 +1,10 @@
-import { FormEvent } from 'react';
+import { PickingInfo } from 'deck.gl';
+import { FormEvent, useCallback } from 'react';
 
 export const useActions = ({
+	deckRef,
 	viewState,
+	setClickedItem,
 	setIsAddLoveOpened,
 	setIsLoading,
 	setAddLoveMessage,
@@ -72,5 +75,30 @@ export const useActions = ({
 		}
 	};
 
-	return { toggleLoveMenu, addPoint };
+	const onMapClick = useCallback(
+		(ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+			if (!deckRef.current) return;
+
+			const containerRect = ev.currentTarget.getBoundingClientRect();
+			const x = ev.clientX - containerRect.left;
+			const y = ev.clientY - containerRect.top;
+
+			const pickInfos: PickingInfo | null = deckRef.current.pickObject({
+				x,
+				y,
+				radius: 1,
+				depth: 5,
+			});
+			console.log('pickInfos: ', pickInfos);
+			if (!pickInfos) {
+				setClickedItem(null);
+				return;
+			}
+
+			setClickedItem(pickInfos);
+		},
+		[deckRef, setClickedItem]
+	);
+
+	return { toggleLoveMenu, addPoint, onMapClick };
 };

app/hooks/useData.ts

@@ -24,6 +24,8 @@ export const useData = () => {
 		zoom: 5,
 	});
 
+	const [clickedItem, setClickedItem] = useState(null);
+
 	useEffect(() => {
 		if ('geolocation' in navigator == false) {
 			setCanUseGeolocation(false);
@@ -38,7 +40,7 @@ export const useData = () => {
 					...prev,
 					latitude: position.coords.latitude,
 					longitude: position.coords.longitude,
-					zoom: 13,
+					zoom: 17,
 				}));
 				setUserLocation({
 					latitude: position.coords.latitude,
@@ -46,9 +48,9 @@ export const useData = () => {
 				});
 			},
 			(error) => {
+				console.warn(error.message);
 				if (error.PERMISSION_DENIED) {
 					setGeoError('permission_denied');
-					console.warn(error.message);
 				}
 			},
 			{
@@ -119,6 +121,8 @@ export const useData = () => {
 		geoError,
 		layers,
 		canUseGeolocation,
+		clickedItem,
+		setClickedItem,
 		isAddLoveOpened,
 		setIsAddLoveOpened,
 		isLoading,

app/page.tsx

@@ -33,6 +33,8 @@ const Home = () => {
 		geoError,
 		canUseGeolocation,
 		layers,
+		clickedItem,
+		setClickedItem,
 		isAddLoveOpened,
 		setIsAddLoveOpened,
 		isLoading,
@@ -41,8 +43,10 @@ const Home = () => {
 		setAddLoveMessage,
 	} = useData();
 
-	const { toggleLoveMenu, addPoint } = useActions({
+	const { toggleLoveMenu, addPoint, onMapClick } = useActions({
+		deckRef,
 		viewState,
+		setClickedItem,
 		setIsAddLoveOpened,
 		setIsLoading,
 		setAddLoveMessage,
@@ -63,7 +67,10 @@ const Home = () => {
 
 	return (
 		<div className='page'>
-			<div className='mapContainer'>
+			<div
+				className='mapContainer'
+				onClick={onMapClick}
+			>
 				<DeckGL
 					ref={deckRef}
 					initialViewState={viewState}
@@ -87,6 +94,23 @@ const Home = () => {
 						}
 						preserveDrawingBuffer
 					></Map>
+					{clickedItem && clickedItem.object ? (
+						<div
+							className='mapTooltip'
+							style={{
+								position: 'absolute',
+								zIndex: 1,
+								pointerEvents: 'none',
+								left: clickedItem.x,
+								top: clickedItem.y,
+								backgroundColor: '#ffffff',
+							}}
+						>
+							{clickedItem.object.properties.location}
+						</div>
+					) : (
+						<></>
+					)}
 				</DeckGL>
 				{isAddLoveOpened && (
 					// <Image