Displaying the current location on the whiteboard.

src/components/map/current-location.tsx

@@ -0,0 +1,26 @@
+import React, { Fragment } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import { MapState } from '../../store/map';
+
+const CurrentLocation: React.FC<{}> = () => {
+  const scale = useSelector(
+    (state: { map: MapState }) => state.map.whiteboard.scale
+  );
+  const CurrentLocationState = useSelector(
+    (state: { map: MapState }) => state.map.currentLocation
+  );
+
+  return (
+    <circle
+      cx={CurrentLocationState.whiteboard.x}
+      cy={CurrentLocationState.whiteboard.y}
+      r={10 / scale}
+      fill='green'
+      opacity='50%'
+    ></circle>
+  );
+};
+
+export default CurrentLocation;

src/components/map/get-location.tsx

@@ -23,6 +23,12 @@ const GetLocation: React.FC<{}> = () => {
           lon: position.coords.longitude,
         })
       );
+      dispatch(
+        mapActions.setCurrent({
+          lat: position.coords.latitude,
+          lon: position.coords.longitude,
+        })
+      );
     });
   };
 

src/components/map/map.tsx

@@ -8,6 +8,7 @@ import Slippy from '../slippy/slippy';
 import TiledMap from './tiled-map';
 import GetLocation from './get-location';
 import Whiteboard from './whiteboard';
+import CurrentLocation from './current-location';
 
 const Map: react.FC<{}> = (props: {}) => {
   const dispatch = useDispatch();
@@ -29,7 +30,9 @@ const Map: react.FC<{}> = (props: {}) => {
     <Fragment>
       <Slippy>
         <GetLocation />
-        <Whiteboard />
+        <Whiteboard>
+          <CurrentLocation />
+        </Whiteboard>
       </Slippy>
       <Layer>
         <TiledMap />

src/components/map/whiteboard.tsx

@@ -16,12 +16,6 @@ const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
       <g
         transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`}
       >
-        <circle
-          cx={0.7154276391666667 * 2**zoom0}
-          cy={0.6137091783430285 * 2**zoom0}
-          r={10 / whiteBoardState.scale}
-          fill='green'
-        ></circle>
         {props.children}
       </g>
     </svg>