💄 Display user position

app/hooks/useData.ts

@@ -1,4 +1,4 @@
-import { IconLayer } from 'deck.gl';
+import { IconLayer, ScatterplotLayer } from 'deck.gl';
 import { useEffect, useRef, useState } from 'react';
 import { StringifiedPinIcon } from '@/assets/PinIcon';
 
@@ -7,6 +7,9 @@ export const useData = () => {
 
 	const [canUseGeolocation, setCanUseGeolocation] = useState(false);
 	const [geoError, setGeoError] = useState(null);
+	const [userLocation, setUserLocation] = useState<{ [key: string]: number }>(
+		{}
+	);
 
 	const [source, setSource] = useState([]);
 	const [layers, setLayers] = useState([]);
@@ -35,13 +38,23 @@ export const useData = () => {
 					...prev,
 					latitude: position.coords.latitude,
 					longitude: position.coords.longitude,
+					zoom: 13,
 				}));
+				setUserLocation({
+					latitude: position.coords.latitude,
+					longitude: position.coords.longitude,
+				});
 			},
 			(error) => {
 				if (error.PERMISSION_DENIED) {
 					setGeoError('permission_denied');
 					console.warn(error.message);
 				}
+			},
+			{
+				maximumAge: 0,
+				timeout: 5000,
+				enableHighAccuracy: true,
 			}
 		);
 
@@ -53,8 +66,28 @@ export const useData = () => {
 	}, []);
 
 	useEffect(() => {
+		const newLayers = [];
+
+		if (userLocation) {
+			const userLayer = new ScatterplotLayer({
+				id: 'userLayer',
+				data: [userLocation],
+				stroked: true,
+				getPosition: (d) => [d.longitude, d.latitude],
+				getRadius: 10,
+				getFillColor: [217, 66, 83],
+				getLineColor: [217, 66, 83, 175],
+				getLineWidth: 5,
+				radiusUnits: 'pixels',
+				lineWidthUnits: 'pixels',
+				pickable: false,
+			});
+
+			newLayers.push(userLayer);
+		}
+
 		if (isAddLoveOpened) {
-			setLayers([]);
+			setLayers(newLayers);
 			return;
 		}
 
@@ -80,8 +113,9 @@ export const useData = () => {
 			pickable: true,
 		});
 
-		setLayers([datasetLayer]);
+		newLayers.push(datasetLayer);
-	}, [source, isAddLoveOpened]);
+		setLayers(newLayers);
+	}, [userLocation, source, isAddLoveOpened]);
 
 	return {
 		deckRef,