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>

src/store/map.ts

@@ -21,7 +21,7 @@ export interface MapScope {
 }
 var initialMapScope: MapScope = {
   center: { lat: -37.8403508, lon: 77.5539501 },
-  zoom: 17,
+  zoom: 15,
 };
 
 // Derived properties
@@ -45,37 +45,21 @@ export interface WhiteboardState {
   translation: Point;
 }
 
+// Current location
+
+export interface CurrentLocationState {
+  geo: geoPoint;
+  whiteboard: Point;
+}
+
 // Global state
 export interface MapState {
   scope: MapScope;
   tiles: TilesDescription;
   slippy: SlippyState;
   whiteboard: WhiteboardState;
+  currentLocation: CurrentLocationState;
 }
-/*
-
-const nbTilesY = _.ceil(mapState.viewport.height / tileSize) + 4;
-  const nbTilesX = _.ceil(mapState.viewport.width / tileSize) + 4;
-  const [tileCenterY, reminderY] = lat2tile(
-    mapState.scope.center.lat,
-    mapState.scope.zoom
-  );
-  const [tileCenterX, reminderX] = lon2tile(
-    mapState.scope.center.lon,
-    mapState.scope.zoom
-  );
-  const firstTileY = tileCenterY - _.round(nbTilesY / 2);
-  const firstTileX = tileCenterX - _.round(nbTilesX / 2);
-  const locationY = (tileCenterY + reminderY - firstTileY) * tileSize;
-  const locationX = (tileCenterX + reminderX - firstTileX) * tileSize;
-  const targetLocationY = mapState.viewport.height / 2;
-  const targetLocationX = mapState.viewport.width / 2;
-  const deltaY = targetLocationY - locationY;
-  const deltaX = targetLocationX - locationX;
-
-
-*/
-
 export var initialMapState: MapState = {
   scope: initialMapScope,
   slippy: {
@@ -103,6 +87,16 @@ export var initialMapState: MapState = {
       y: 0,
     },
   },
+  currentLocation: {
+    geo: {
+      lat: 0,
+      lon: 0,
+    },
+    whiteboard: {
+      x: 0,
+      y: 0,
+    },
+  },
 };
 
 const evaluateWhiteboardViewBox = (
@@ -211,6 +205,18 @@ const mapSlice = createSlice({
       state.scope.center.lon = action.payload.lon;
       evaluateStateFromScope(state);
     },
+    setCurrent: (state, action) => {
+      state.currentLocation.geo.lat = action.payload.lat;
+      state.currentLocation.geo.lon = action.payload.lon;
+      state.currentLocation.whiteboard.x = lon2tile(
+        state.currentLocation.geo.lon,
+        zoom0
+      );
+      state.currentLocation.whiteboard.y = lat2tile(
+        state.currentLocation.geo.lat,
+        zoom0
+      );
+    },
     shift: (state, action) => {
       state.slippy.translation.x =
         state.slippy.translation.x + action.payload.x;