New component to manage tiled layers.

svgmap/src/components/map/Map.tsx

@@ -7,6 +7,7 @@ import SlippyBoard from './SlippyBoard';
 import SingleTouchHandler from './SingleTouchHandler';
 import DoubleTouchHandler from './DoubleTouchHandler';
 import TiledLayer from './TiledLayer';
+import TiledLayerConductor from './TiledLayersConductor';
 
 interface MapProperties {
   height: number;
@@ -78,38 +79,13 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
               height={boardSize}
               fill='red'
             />
-            <TiledLayer
+            <TiledLayerConductor
-              key='tile1'
               height={props.height}
               width={props.width}
               shift={shift}
               zoom={zoom}
-              layerZoom={1}
               tileSize={256}
-              nbTiles={nbTiles}
+              key='tiled-layers'
-              active={zoom < 1.5}
-            />
-            <TiledLayer
-              key='tile2'
-              height={props.height * 2}
-              width={props.width * 2}
-              shift={{ x: shift.x * 2, y: shift.y * 2 }}
-              zoom={zoom}
-              layerZoom={0.5}
-              tileSize={256}
-              nbTiles={nbTiles * 2}
-              active={zoom >= Math.SQRT2 && zoom < 2 * Math.SQRT2}
-            />
-            <TiledLayer
-              key='tile3'
-              height={props.height * 4}
-              width={props.width * 4}
-              shift={{ x: shift.x * 4, y: shift.y * 4 }}
-              zoom={zoom}
-              layerZoom={0.25}
-              tileSize={256}
-              nbTiles={nbTiles * 4}
-              active={zoom >= 2 * Math.SQRT2}
             />
             <circle key='circle' cx='50' cy='50' r='50' />,
           </>

svgmap/src/components/map/TiledLayersConductor.tsx

@@ -0,0 +1,63 @@
+import react from 'react';
+import TiledLayer from './TiledLayer';
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface TiledLayerConductorProperties {
+  height: number;
+  width: number;
+  shift: Point;
+  zoom: number;
+  tileSize: number;
+}
+
+const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
+  props: TiledLayerConductorProperties
+) => {
+  const nbTiles =
+    Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
+
+  return (
+    <>
+      {' '}
+      <TiledLayer
+        key='tile1'
+        height={props.height}
+        width={props.width}
+        shift={props.shift}
+        zoom={props.zoom}
+        layerZoom={1}
+        tileSize={256}
+        nbTiles={nbTiles}
+        active={props.zoom < 1.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}
+      />
+    </>
+  );
+};
+
+export default TiledLayerConductor;