Implementing a SVG layout (aka whiteboard).

src/components/map/map.tsx

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

src/components/map/whiteboard.tsx

@@ -0,0 +1,32 @@
+import React, { Fragment } from 'react';
+import { useSelector } from 'react-redux';
+import { MapState } from '../../store/map';
+
+interface WhiteboardProps {
+  children?: any;
+}
+
+const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
+  const whiteBoardState = useSelector(
+    (state: { map: MapState }) => state.map.whiteboard
+  );
+
+  return (
+    <svg width={window.innerWidth} height={window.innerHeight}>
+      <g
+        transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`}
+      >
+        <circle
+          cx='0.7154276391666667'
+          cy='0.6137091783430285'
+          r={10 / whiteBoardState.scale}
+          fill='green'
+          vector-effect='non-scaling-size'
+        ></circle>
+        {props.children}
+      </g>
+    </svg>
+  );
+};
+
+export default Whiteboard;