💄 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 };
 };