diff --git a/app/hooks/useData.ts b/app/hooks/useData.ts index 7e9c8b8..01cd8d5 100644 --- a/app/hooks/useData.ts +++ b/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]); - }, [source, isAddLoveOpened]); + newLayers.push(datasetLayer); + setLayers(newLayers); + }, [userLocation, source, isAddLoveOpened]); return { deckRef,