Playing with images, trying to make them cacheable...

svgmap/src/components/map/Map.tsx

@@ -31,7 +31,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
   };
 
   var tiledLayer: any[] = [];
-  tiledLayer.push(<Tile key='tile' href={fakeTile} delay={2000} />);
+  tiledLayer.push(<Tile key='tile' href={fakeTile} x={0} y={0} delay={2000} />);
 
   return (
     <IonContent fullscreen={true}>

svgmap/src/components/map/Tile.tsx

@@ -1,12 +1,14 @@
-import react, { useEffect, useState } from 'react';
+import react, { useEffect, useRef, useState } from 'react';
 
 interface TileProperties {
   href: string;
+  x: number;
+  y: number;
   delay?: number;
 }
 
 const Tile: react.FC<TileProperties> = (props: TileProperties) => {
-  const [ready, setReady] = useState(false);
+  const g = useRef<SVGGElement>(null);
 
   const timeout = (ms: number) => {
     return new Promise((resolve) => setTimeout(resolve, ms));
@@ -16,23 +18,34 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
     const loadImage = async () => {
       console.log(`Pre loading: ${JSON.stringify(props.href)}`);
       const image = new Image(256, 256);
+      //      const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement;
+      //      const image = new SVGImageElement();
       image.loading = 'eager';
-      image.src = props.href;
+      image.setAttribute('href', props.href);
       if (!image.complete) {
         await image.decode();
       }
       if (props.delay !== undefined) {
         await timeout(props.delay);
       }
-      setReady(true);
+      const svgImage = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'image'
+      ) as unknown as SVGImageElement;
+      svgImage.setAttribute('width', '256');
+      svgImage.setAttribute('height', '256');
+      svgImage.setAttribute('href', props.href);
+      // svgImage.setAttribute('x', '0');
+      // svgImage.setAttribute('y', '0');
+      g.current?.replaceChildren(svgImage);
     };
     loadImage();
   });
 
-  return ready ? (
-    <image width={256} height={256} href={props.href} x={0} y={0} />
-  ) : (
-    <></>
+  return (
+    <>
+      <g ref={g} transform={`translate(${props.x},${props.y})`} />
+    </>
   );
 };