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