Displaying the current location.

src/components/map/CurrentLocation.tsx

@@ -0,0 +1,40 @@
+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;

src/components/map/LiveMap.tsx

@@ -1,10 +1,9 @@
-import react, { JSXElementConstructor, ReactComponentElement, ReactElement, ReactNode, useEffect, useState } from 'react';
+import react, { JSXElementConstructor, ReactElement, useEffect, useState } from 'react';
 import useDimensions from 'react-cool-dimensions';
 
 import { MapScope, Point } from './types';
 import Map from './Map';
 import Handlers from './Handlers';
-import Marker from './Marker';
 import { tileProviders } from './tile-providers';
 import { lon2tile, lat2tile, tile2lat, tile2long } from '../../lib/geo';