From 22f1e9c8c6423cc8e2a92861db7daf38d5bd239a Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sat, 15 Oct 2022 17:43:49 +0200
Subject: [PATCH] Adding a notion of baseZoomLevel.

---
 svgmap/src/components/map/Map.tsx                  | 4 ++++
 svgmap/src/components/map/TiledLayersConductor.tsx | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/svgmap/src/components/map/Map.tsx b/svgmap/src/components/map/Map.tsx
index 90d0c3a..307b985 100644
--- a/svgmap/src/components/map/Map.tsx
+++ b/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' />,
           </>
diff --git a/svgmap/src/components/map/TiledLayersConductor.tsx b/svgmap/src/components/map/TiledLayersConductor.tsx
index 859dc9e..5c0a443 100644
--- a/svgmap/src/components/map/TiledLayersConductor.tsx
+++ b/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 }}