Refactoring to work with any number of layers.

svgmap/src/components/map/Map.tsx

@@ -85,6 +85,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
               zoom={zoom}
               tileSize={256}
               key='tiled-layers'
+              numberOfZoomLevels={3}
             />
             <circle key='circle' cx='50' cy='50' r='50' />,
           </>

svgmap/src/components/map/TiledLayersConductor.tsx

@@ -12,6 +12,7 @@ interface TiledLayerConductorProperties {
   shift: Point;
   zoom: number;
   tileSize: number;
+  numberOfZoomLevels?: number;
 }
 
 const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
@@ -20,44 +21,40 @@ const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
   const nbTiles =
     Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
 
-  return (
-    <>
-      {' '}
+  const numberOfZoomLevels =
+    props.numberOfZoomLevels === undefined
+      ? 1
+      : props.numberOfZoomLevels % 2 === 0
+      ? props.numberOfZoomLevels + 1
+      : props.numberOfZoomLevels;
+
+  const layers = [];
+
+  for (let i = 0; i < numberOfZoomLevels; i++) {
+    layers.push(
       <TiledLayer
-        key='tile1'
-        height={props.height}
-        width={props.width}
-        shift={props.shift}
+        key={`layer${i}`}
+        height={props.height * 2 ** i}
+        width={props.width * 2 ** i}
+        shift={{ x: props.shift.x * 2 ** i, y: props.shift.y * 2 ** i }}
         zoom={props.zoom}
-        layerZoom={1}
+        layerZoom={2 ** -i}
         tileSize={256}
-        nbTiles={nbTiles}
-        active={props.zoom < 1.5}
+        nbTiles={nbTiles * 2 ** i}
+        active={
+          numberOfZoomLevels === 1
+            ? true
+            : i === 0
+            ? props.zoom < 2 ** 0.5
+            : i === numberOfZoomLevels - 1
+            ? props.zoom >= 2 ** (i - 0.5)
+            : props.zoom < 2 ** (i + 0.5) && props.zoom >= 2 ** (i - 0.5)
+        }
       />
-      <TiledLayer
-        key='tile2'
-        height={props.height * 2}
-        width={props.width * 2}
-        shift={{ x: props.shift.x * 2, y: props.shift.y * 2 }}
-        zoom={props.zoom}
-        layerZoom={0.5}
-        tileSize={256}
-        nbTiles={nbTiles * 2}
-        active={props.zoom >= Math.SQRT2 && props.zoom < 2 * Math.SQRT2}
-      />
-      <TiledLayer
-        key='tile3'
-        height={props.height * 4}
-        width={props.width * 4}
-        shift={{ x: props.shift.x * 4, y: props.shift.y * 4 }}
-        zoom={props.zoom}
-        layerZoom={0.25}
-        tileSize={256}
-        nbTiles={nbTiles * 4}
-        active={props.zoom >= 2 * Math.SQRT2}
-      />
-    </>
-  );
+    );
+  }
+
+  return <>{layers}</>;
 };
 
 export default TiledLayerConductor;