Expermienting a reticle.

src/components/map/Reticle.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Point } from '../../lib/geo';
+
+const Reticle: React.FC<{}> = () => {
+  const center: Point = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+  const radius = Math.min(window.innerWidth, window.innerHeight) / 8;
+
+  return (
+    <g>
+      <circle
+        cx={center.x}
+        cy={center.y}
+        r={radius}
+        fill='transparent'
+        stroke='black'
+        strokeWidth={2}
+      />
+      <path
+        d={`M ${center.x - radius},${center.y} 
+            h ${radius - 3} 
+            m ${6},0
+            h ${radius - 3}
+            M ${center.x},${center.y - radius}
+            v ${radius - 3}
+            m 0,${6}
+            v ${radius - 3}`}
+        strokeWidth={1}
+        stroke='red'
+      />
+    </g>
+  );
+};
+
+export default Reticle;

src/components/map/map.tsx

@@ -26,6 +26,7 @@ import TileServerChooserButton from './TileServerChooserButton';
 import TileServerChooserDialog from './TileServerChooserDialog';
 import TrackBrowser from './TracksBrowser';
 import Settings from './Settings';
+import Reticle from './Reticle';
 
 const Map: react.FC<{}> = () => {
   const dispatch = useDispatch();
@@ -53,7 +54,7 @@ const Map: react.FC<{}> = () => {
         <IonApp>
           <TileServerChooserDialog />
           <Slippy>
-            <Whiteboard>
+            <Whiteboard fixedChildren={<Reticle />}>
               <CurrentLocation />
               dbReady && <Gpxes />
             </Whiteboard>
@@ -66,7 +67,7 @@ const Map: react.FC<{}> = () => {
       <IonHeader className='ion-no-border' translucent={true}>
         <IonToolbar>
           <IonButtons slot='end'>
-            <TrackBrowser/>
+            <TrackBrowser />
             <GpxRecord />
             <TileServerChooserButton />
             <Settings />

src/components/map/whiteboard.tsx

@@ -4,6 +4,7 @@ import { MapState } from '../../store/map';
 
 interface WhiteboardProps {
   children?: any;
+  fixedChildren?: any;
 }
 
 const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
@@ -12,7 +13,12 @@ const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
   );
 
   return (
-    <svg width={window.innerWidth} height={window.innerHeight} className="whiteboard">
+    <svg
+      width={window.innerWidth}
+      height={window.innerHeight}
+      className='whiteboard'
+    >
+      {props.fixedChildren}
       <g
         transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`}
       >