Seeing how we can simulate slow tiles.

svgmap/src/components/map/FakeTile.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+    <rect x="0" y="0" width="256" height="256" fill="lightblue" stroke="black" stroke-width="2" />
+</svg>

svgmap/src/components/map/Map.tsx

@@ -4,7 +4,8 @@ import react, { useState } from 'react';
 import './Map.css';
 import MouseHandler from './MouseHandler';
 import SlippyBoard from './SlippyBoard';
-import TiledLayer from './TiledLayer';
+import Tile from './Tile';
+import fakeTile from './FakeTile.svg';
 
 interface MapProperties {
   height: number;
@@ -25,10 +26,13 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
     addShift({
       x: (shift.x - center.x) * (zoomFactor - 1),
       y: (shift.y - center.y) * (zoomFactor - 1),
-    });
+    }); 
     setZoom(zoom * zoomFactor);
   };
 
+  var tiledLayer: any[] = [];
+  tiledLayer.push(<Tile key='tile' href={fakeTile} delay={2000} />);
+
   return (
     <IonContent fullscreen={true}>
       <div
@@ -47,7 +51,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
           shift={shift}
           zoom={zoom}
           layers={[
-            { key: 'tiles', content: <TiledLayer /> },
+            { key: 'tiles', content: tiledLayer },
             { key: 'circle', content: <circle cx='50' cy='50' r='50' /> },
           ]}
         />

svgmap/src/components/map/SlippyBoard.tsx

@@ -4,7 +4,7 @@ interface SlippyBoardProperties {
   boardSize: number;
   shift: { x: number; y: number };
   zoom: number;
-  layers?: { key: string; content: ReactElement }[];
+  layers?: { key: string; content: ReactElement | ReactElement[] }[];
 }
 
 const SlippyBoard: react.FC<SlippyBoardProperties> = (
@@ -16,9 +16,7 @@ const SlippyBoard: react.FC<SlippyBoardProperties> = (
         transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
       >
         {props.layers
-          ? props.layers.map((layer) => (
+          ? props.layers.map((layer) => <g key={layer.key}>{layer.content}</g>)
-              <Fragment key={layer.key}>{layer.content}</Fragment>
-            ))
           : null}
       </g>
     </svg>

svgmap/src/components/map/Tile.tsx

@@ -0,0 +1,39 @@
+import react, { useEffect, useState } from 'react';
+
+interface TileProperties {
+  href: string;
+  delay?: number;
+}
+
+const Tile: react.FC<TileProperties> = (props: TileProperties) => {
+  const [ready, setReady] = useState(false);
+
+  const timeout = (ms: number) => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  };
+
+  useEffect(() => {
+    const loadImage = async () => {
+      console.log(`Pre loading: ${JSON.stringify(props.href)}`);
+      const image = new Image(256, 256);
+      image.loading = 'eager';
+      image.src = props.href;
+      if (!image.complete) {
+        await image.decode();
+      }
+      if (props.delay !== undefined) {
+        await timeout(props.delay);
+      }
+      setReady(true);
+    };
+    loadImage();
+  });
+
+  return ready ? (
+    <image width={256} height={256} href={props.href} x={0} y={0} />
+  ) : (
+    <></>
+  );
+};
+
+export default Tile;

svgmap/src/components/map/TiledLayer.tsx

@@ -1,11 +0,0 @@
-import react from 'react';
-
-interface TiledLayerProperties {}
-
-const TiledLayer: react.FC<TiledLayerProperties> = (
-  props: TiledLayerProperties
-) => {
-  return <g></g>;
-};
-
-export default TiledLayer;