dyomedea/src/components/map/CurrentLocation.tsx

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'
      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}
    />
  ) : null;
};

export default CurrentLocation;