Trying to simplify...

svgmap/src/components/map/Map.tsx

@@ -3,7 +3,8 @@ import react, { useState } from 'react';
 
 import './Map.css';
 import MouseHandler from './MouseHandler';
-import ResizeableBoard from './ResizeableBoard';
+import SlippyBoard from './SlippyBoard';
+import TiledLayer from './TiledLayer';
 
 interface MapProperties {
   height: number;
@@ -21,7 +22,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
   };
 
   const addZoom = (zoomFactor: number, center: { x: number; y: number }) => {
-    setShift({
+    addShift({
       x: (shift.x - center.x) * (zoomFactor - 1),
       y: (shift.y - center.y) * (zoomFactor - 1),
     });
@@ -41,7 +42,15 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
           addZoom={addZoom}
           boardSize={boardSize}
         />
-        <ResizeableBoard boardSize={boardSize} shift={shift} zoom={zoom} />
+        <SlippyBoard
+          boardSize={boardSize}
+          shift={shift}
+          zoom={zoom}
+          layers={[
+            { key: 'tiles', content: <TiledLayer /> },
+            { key: 'circle', content: <circle cx='50' cy='50' r='50' /> },
+          ]}
+        />
       </div>
     </IonContent>
   );

svgmap/src/components/map/SlippyBoard.tsx

@@ -0,0 +1,28 @@
+import react, { Fragment, ReactElement, ReactSVGElement } from 'react';
+
+interface SlippyBoardProperties {
+  boardSize: number;
+  shift: { x: number; y: number };
+  zoom: number;
+  layers?: { key: string; content: ReactElement }[];
+}
+
+const SlippyBoard: react.FC<SlippyBoardProperties> = (
+  props: SlippyBoardProperties
+) => {
+  return (
+    <svg height={props.boardSize} width={props.boardSize}>
+      <g
+        transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
+      >
+        {props.layers
+          ? props.layers.map((layer) => (
+              <Fragment key={layer.key}>{layer.content}</Fragment>
+            ))
+          : null}
+      </g>
+    </svg>
+  );
+};
+
+export default SlippyBoard;

svgmap/src/components/map/TiledLayer.tsx

@@ -0,0 +1,11 @@
+import react from 'react';
+
+interface TiledLayerProperties {}
+
+const TiledLayer: react.FC<TiledLayerProperties> = (
+  props: TiledLayerProperties
+) => {
+  return <g></g>;
+};
+
+export default TiledLayer;