Playing with multiple tiled layers.

svgmap/src/components/map/Map.tsx

@@ -1,5 +1,5 @@
 import { IonContent } from '@ionic/react';
-import react, { useEffect, useState } from 'react';
+import react, { useState } from 'react';
 
 import './Map.css';
 import MouseHandler from './MouseHandler';
@@ -86,13 +86,31 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
               ),
             },
             {
-              key: 'tiles',
+              key: 'tiles1',
               content: (
                 <TiledLayer
                   height={props.height}
                   width={props.width}
                   shift={shift}
                   zoom={zoom}
+                  tileSize={256}
+                  nbTiles={nbTiles}
+                  active={zoom < 2}
+                />
+              ),
+            },
+            {
+              key: 'tiles2',
+              transform: 'scale(.5)',
+              content: (
+                <TiledLayer
+                  height={props.height * 2}
+                  width={props.width * 2}
+                  shift={{ x: shift.x * 2, y: shift.y * 2 }}
+                  zoom={zoom}
+                  tileSize={256}
+                  nbTiles={nbTiles * 2}
+                  active={zoom >= 2}
                 />
               ),
             },

svgmap/src/components/map/SlippyBoard.tsx

@@ -1,5 +1,4 @@
-import { ReactComponentOrElement } from '@ionic/react';
+import react, { ReactElement, ReactNode } from 'react';
-import react, { ReactComponentElement, ReactElement, ReactNode } from 'react';
 
 interface SlippyBoardProperties {
   boardSize: number;
@@ -7,7 +6,8 @@ interface SlippyBoardProperties {
   zoom: number;
   layers?: {
     key: string;
-    content: ReactElement|ReactNode | ReactElement[] | ReactElement[][];
+    transform?: string;
+    content: ReactElement | ReactNode | ReactElement[] | ReactElement[][];
   }[];
 }
 
@@ -20,7 +20,15 @@ const SlippyBoard: react.FC<SlippyBoardProperties> = (
         transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
       >
         {props.layers
-          ? props.layers.map((layer) => <g key={layer.key}>{layer.content}</g>)
+          ? props.layers.map((layer) => (
+              <g
+                className='layer'
+                key={layer.key}
+                transform={layer.transform === undefined ? '' : layer.transform}
+              >
+                {layer.content}
+              </g>
+            ))
           : null}
       </g>
     </svg>

svgmap/src/components/map/Tile.tsx

@@ -4,6 +4,7 @@ interface TileProperties {
   href?: string;
   x: number;
   y: number;
+  tileSize: number;
   delay?: number;
 }
 
@@ -19,7 +20,7 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
     if (props.href !== undefined) {
       const loadImage = async () => {
         console.log(`Pre loading: ${JSON.stringify(props.href)}`);
-        const image = new Image(256, 256);
+        const image = new Image(props.tileSize, props.tileSize);
         //      const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement;
         //      const image = new SVGImageElement();
         image.loading = 'eager';
@@ -35,8 +36,8 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
           'http://www.w3.org/2000/svg',
           'image'
         ) as unknown as SVGImageElement;
-        svgImage.setAttribute('width', '256');
+        svgImage.setAttribute('width', props.tileSize.toString());
-        svgImage.setAttribute('height', '256');
+        svgImage.setAttribute('height', props.tileSize.toString());
         // @ts-ignore
         svgImage.setAttribute('href', props.href);
         // svgImage.setAttribute('x', '0');
@@ -45,7 +46,7 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
       };
       loadImage();
     }
-  }, [props.href, props.delay]);
+ }, [props.href, props.delay, props.tileSize]);
 
   // const children = useMemo(
   //   () => (

svgmap/src/components/map/TiledLayer.tsx

@@ -12,18 +12,18 @@ interface TiledLayerProperties {
   width: number;
   shift: Point;
   zoom: number;
+  tileSize: number;
+  nbTiles: number;
+  active: boolean;
 }
 
 const TiledLayer: react.FC<TiledLayerProperties> = (
   props: TiledLayerProperties
 ) => {
-  const nbTiles =
-    Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
-
   var initialTiledLayer: any[][] = [];
-  for (let row = 0; row < nbTiles; row++) {
+  for (let row = 0; row < props.nbTiles; row++) {
     let tileRow = [];
-    for (let col = 0; col < nbTiles; col++) {
+    for (let col = 0; col < props.nbTiles; col++) {
       tileRow.push(<g key={`${row}/${col}`} />);
     }
     initialTiledLayer.push(tileRow);
@@ -32,57 +32,78 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
   const [tiledLayer, setTiledLayer] = useState(initialTiledLayer);
 
   useEffect(() => {
-    const firstVisibleTiles = {
+    if (props.active) {
-      x: Math.max(Math.floor(-props.shift.x / 256 / props.zoom), 0),
+      const firstVisibleTiles = {
-      y: Math.max(Math.floor(-props.shift.y / 256 / props.zoom), 0),
+        x: Math.max(
-    };
+          Math.floor(-props.shift.x / props.tileSize / props.zoom),
+          0
+        ),
+        y: Math.max(
+          Math.floor(-props.shift.y / props.tileSize / props.zoom),
+          0
+        ),
+      };
 
-    const lastVisibleTiles = {
+      const lastVisibleTiles = {
-      x: Math.min(
+        x: Math.min(
-        Math.ceil(firstVisibleTiles.x + props.width / 256 / props.zoom),
+          Math.ceil(
-        nbTiles - 1
+            firstVisibleTiles.x + props.width / props.tileSize / props.zoom
-      ),
+          ),
-      y: Math.min(
+          props.nbTiles - 1
-        Math.ceil(firstVisibleTiles.y + props.height / 256 / props.zoom),
+        ),
-        nbTiles - 1
+        y: Math.min(
-      ),
+          Math.ceil(
-    };
+            firstVisibleTiles.y + props.height / props.tileSize / props.zoom
-    console.log(
+          ),
-      `Adding new tiles if needed for  ${JSON.stringify(
+          props.nbTiles - 1
-        firstVisibleTiles
+        ),
-      )}/${JSON.stringify(lastVisibleTiles)}.`
+      };
-    );
+      console.log(
-    const newTiledLayer: any[][] = [];
+        `Adding new tiles if needed for  ${JSON.stringify(
-    for (let row = 0; row < nbTiles; row++) {
+          firstVisibleTiles
-      let tileRow = [];
+        )}/${JSON.stringify(lastVisibleTiles)}.`
-      for (let col = 0; col < nbTiles; col++) {
+      );
-        const key = `${row}/${col}`;
+      const newTiledLayer: any[][] = [];
-        if (
+      for (let row = 0; row < props.nbTiles; row++) {
-          tiledLayer[row][col].type === 'g' &&
+        let tileRow = [];
-          row >= firstVisibleTiles.y &&
+        for (let col = 0; col < props.nbTiles; col++) {
-          row <= lastVisibleTiles.y &&
+          const key = `${row}/${col}`;
-          col >= firstVisibleTiles.x &&
+          if (
-          col <= lastVisibleTiles.x
+            tiledLayer[row][col].type === 'g' &&
-        ) {
+            row >= firstVisibleTiles.y &&
-          console.log(`Adding tile ${row}/${col}`);
+            row <= lastVisibleTiles.y &&
-          tileRow.push(
+            col >= firstVisibleTiles.x &&
-            <Tile
+            col <= lastVisibleTiles.x
-              key={key}
+          ) {
-              href={fakeTile}
+            console.log(`Adding tile ${row}/${col}`);
-              x={col * 256}
+            tileRow.push(
-              y={row * 256}
+              <Tile
-              delay={1000}
+                key={key}
-            />
+                href={fakeTile}
-          );
+                x={col * props.tileSize}
-        } else {
+                y={row * props.tileSize}
-          tileRow.push(tiledLayer[row][col]);
+                tileSize={props.tileSize}
+                delay={1000}
+              />
+            );
+          } else {
+            tileRow.push(tiledLayer[row][col]);
+          }
         }
+        newTiledLayer.push(tileRow);
       }
-      newTiledLayer.push(tileRow);
-    }
 
-    setTiledLayer(newTiledLayer);
+      setTiledLayer(newTiledLayer);
-  }, [props.shift, props.zoom, nbTiles, props.height, props.width]);
+    }
+  }, [
+    props.shift,
+    props.zoom,
+    props.nbTiles,
+    props.height,
+    props.width,
+    props.active,
+    props.tileSize,
+  ]);
 
   return <>{tiledLayer}</>;
 };