Changed the zoom relative level for the SVG overlay to avoid issues at higher zoom levels (probably due to rounding errors).

src/components/map/whiteboard.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { useSelector } from 'react-redux';
-import { MapState } from '../../store/map';
+import { MapState, zoom0 } from '../../store/map';
 
 interface WhiteboardProps {
   children?: any;
@@ -17,11 +17,10 @@ const Whiteboard: React.FC<WhiteboardProps> = (props: WhiteboardProps) => {
         transform={`scale(${whiteBoardState.scale}) translate(${whiteBoardState.translation.x},${whiteBoardState.translation.y})`}
       >
         <circle
-          cx='0.7154276391666667'
-          cy='0.6137091783430285'
+          cx={0.7154276391666667 * 2**zoom0}
+          cy={0.6137091783430285 * 2**zoom0}
           r={10 / whiteBoardState.scale}
           fill='green'
-          vector-effect='non-scaling-size'
         ></circle>
         {props.children}
       </g>

src/store/map.ts

@@ -10,6 +10,8 @@ import {
   tile2long,
 } from '../lib/geo';
 
+export const zoom0 = 10;
+
 // Top level properties (the other properties can be derived from them)
 
 // The map itself
@@ -19,7 +21,7 @@ export interface MapScope {
 }
 var initialMapScope: MapScope = {
   center: { lat: -37.8403508, lon: 77.5539501 },
-  zoom: 4,
+  zoom: 17,
 };
 
 // Derived properties
@@ -109,7 +111,7 @@ const evaluateWhiteboardViewBox = (
 ) => {
   // Update the whiteboard SVG viewBox
 
-  const scaleFactor = 2 ** state.scope.zoom;
+  const scaleFactor = 2 ** (state.scope.zoom - zoom0);
 
   state.whiteboard.scale = scaleFactor * tileSize;
   state.whiteboard.translation.x =