dyomedea/src/components/map/CurrentLocation.tsx

41 lines
966 B
TypeScript
Raw Normal View History

2022-11-02 21:28:08 +00:00
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;