41 lines
966 B
TypeScript
41 lines
966 B
TypeScript
|
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;
|