💄 Increase default zoom & prepare click tooltip

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