From f0cf255f14ac22eb799820348dac94727d0bd076 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Wed, 21 Sep 2022 15:47:57 +0200
Subject: [PATCH] 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 | 7 +++----
 src/store/map.ts                  | 6 ++++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/map/whiteboard.tsx b/src/components/map/whiteboard.tsx
index d364160..0d12dc8 100644
--- a/src/components/map/whiteboard.tsx
+++ b/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>
diff --git a/src/store/map.ts b/src/store/map.ts
index 50e6bb7..956962f 100644
--- a/src/store/map.ts
+++ b/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 =