import { atom, useAtom } from 'jotai'; import react from 'react'; import Marker from './Marker'; import { geoPoint, TileKeyObject } from './types'; export interface CurrentLocationProperties { keyObject?: TileKeyObject; zoom?: number; } const initialLocation: geoPoint | null = null; export const locationAtom = atom<geoPoint | null>(initialLocation); export const CurrentLocation: react.FC<CurrentLocationProperties> = ( props: CurrentLocationProperties ) => { const [location] = useAtom(locationAtom); return location !== null ? ( <Marker key='currentLocation' coordinates={location} icon={ <circle cx={0} cy={0} r={8 / 256} fill='blue' opacity='90%' stroke='white' strokeWidth={3 / 256} strokeOpacity='100%' /> } keyObject={props.keyObject} zoom={props.zoom} /> ) : null; }; export default CurrentLocation;