Adding a notion of baseZoomLevel.

svgmap/src/components/map/Map.tsx

@@ -37,6 +37,8 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
     setZoom(zoom * zoomFactor);
   };
 
+  const [baseZoomLevel, setBaseZoomLevel] = useState(10);
+
   console.log(`Rendering Map, zoom:${zoom}, shift:${JSON.stringify(shift)}`);
 
   return (
@@ -86,6 +88,8 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
               tileSize={256}
               key='tiled-layers'
               numberOfZoomLevels={5}
+              baseZoomLevel={baseZoomLevel}
+              setBaseZoomLevel={setBaseZoomLevel}
             />
             <circle key='circle' cx='50' cy='50' r='50' />,
           </>

svgmap/src/components/map/TiledLayersConductor.tsx

@@ -13,6 +13,8 @@ interface TiledLayerConductorProperties {
   zoom: number;
   tileSize: number;
   numberOfZoomLevels?: number;
+  baseZoomLevel: number;
+  setBaseZoomLevel: (baseZoomLevel: number) => void;
 }
 
 const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
@@ -37,7 +39,7 @@ const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
   const getTiledLayer = (i: number, isActive: boolean) => {
     return (
       <TiledLayer
-        key={`layer${i}`}
+        key={`layer${i + props.baseZoomLevel}`}
         height={props.height * 2 ** i}
         width={props.width * 2 ** i}
         shift={{ x: props.shift.x * 2 ** i, y: props.shift.y * 2 ** i }}