dyomedea/src/components/map/CurrentLocation.tsx

47 lines
1.1 KiB
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, Rectangle, TileKeyObject } from './types';
2022-11-02 21:28:08 +00:00
export interface CurrentLocationProperties {
keyObject?: TileKeyObject;
zoom?: number;
viewPort?: Rectangle;
2022-11-02 21:28:08 +00:00
}
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)}`
);
2022-11-02 21:28:08 +00:00
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}
viewPort={props.viewPort}
2022-11-02 21:28:08 +00:00
/>
) : null;
};
export default CurrentLocation;