From 0d08ff8cba3b65ea3c40e6b09454a4701d335bbf Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sun, 16 Oct 2022 15:14:00 +0200
Subject: [PATCH] Test using real tiles.

---
 svgmap/src/components/map/Tile.tsx            | 65 +++++++------------
 svgmap/src/components/map/TiledLayer.tsx      |  3 +-
 .../src/components/map/TiledLayersStack.tsx   |  2 +-
 3 files changed, 27 insertions(+), 43 deletions(-)

diff --git a/svgmap/src/components/map/Tile.tsx b/svgmap/src/components/map/Tile.tsx
index 0ee7c3b..960352a 100644
--- a/svgmap/src/components/map/Tile.tsx
+++ b/svgmap/src/components/map/Tile.tsx
@@ -2,7 +2,6 @@ import react, { useEffect, useRef } from 'react';
 import { TileKey } from './Map';
 
 interface TileProperties {
-  href?: string;
   x: number;
   y: number;
   tileSize: number;
@@ -19,45 +18,31 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
   };
 
   useEffect(() => {
-    if (props.href !== undefined) {
-      const loadImage = async () => {
-        console.log(`Pre loading: ${JSON.stringify(props.href)}`);
-        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';
-        // @ts-ignore
-        image.setAttribute('href', props.href);
-        if (!image.complete) {
-          await image.decode();
-        }
-        if (props.delay !== undefined) {
-          await timeout(props.delay);
-        }
-        const svgImage = document.createElementNS(
-          'http://www.w3.org/2000/svg',
-          'image'
-        ) as unknown as SVGImageElement;
-        svgImage.setAttribute('width', props.tileSize.toString());
-        svgImage.setAttribute('height', props.tileSize.toString());
-        // @ts-ignore
-        svgImage.setAttribute('href', props.href);
-        // svgImage.setAttribute('x', '0');
-        // svgImage.setAttribute('y', '0');
-        g.current?.replaceChildren(svgImage);
-      };
-      loadImage();
-    }
-  }, [props.href, props.delay, props.tileSize]);
-
-  // const children = useMemo(
-  //   () => (
-  //     <>
-  //       <g ref={g} transform={`translate(${props.x},${props.y})`} />
-  //     </>
-  //   ),
-  //   []
-  // );
+    const loadImage = async () => {
+      const href = `https://tile.openstreetmap.org/${props.tileKey.zoomLevel}/${props.tileKey.x}/${props.tileKey.y}.png`;
+      console.log(`Pre loading: ${JSON.stringify(href)}`);
+      const image = new Image(props.tileSize, props.tileSize);
+      image.loading = 'eager';
+      // @ts-ignore
+      image.setAttribute('href', href);
+      if (!image.complete) {
+        await image.decode();
+      }
+      if (props.delay !== undefined) {
+        await timeout(props.delay);
+      }
+      const svgImage = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'image'
+      ) as unknown as SVGImageElement;
+      svgImage.setAttribute('width', props.tileSize.toString());
+      svgImage.setAttribute('height', props.tileSize.toString());
+      // @ts-ignore
+      svgImage.setAttribute('href', href);
+      g.current?.replaceChildren(svgImage);
+    };
+    loadImage();
+  }, [props.delay, props.tileSize]);
 
   return (
     <>
diff --git a/svgmap/src/components/map/TiledLayer.tsx b/svgmap/src/components/map/TiledLayer.tsx
index 7d1eef0..7428794 100644
--- a/svgmap/src/components/map/TiledLayer.tsx
+++ b/svgmap/src/components/map/TiledLayer.tsx
@@ -94,11 +94,10 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
               <Tile
                 key={tileKeyToString(tileKey)}
                 tileKey={tileKey}
-                href={fakeTile}
                 x={col * props.tileSize}
                 y={row * props.tileSize}
                 tileSize={props.tileSize}
-                delay={1000}
+                delay={100}
               />
             );
           } else {
diff --git a/svgmap/src/components/map/TiledLayersStack.tsx b/svgmap/src/components/map/TiledLayersStack.tsx
index c18b4f0..369af39 100644
--- a/svgmap/src/components/map/TiledLayersStack.tsx
+++ b/svgmap/src/components/map/TiledLayersStack.tsx
@@ -49,7 +49,7 @@ const TiledLayersStack: react.FC<TiledLayersStackProperties> = (
     const zoom = 2 ** (zoomLevel - safetyZoomLevels);
     const currentTiledLayerKey = {
       provider: tiledLayerKey.provider,
-      zoomLevel: zoomLevel + tiledLayerKey.zoomLevel,
+      zoomLevel: zoomLevel -safetyZoomLevels + tiledLayerKey.zoomLevel,
       x: tiledLayerKey.x * zoom,
       y: tiledLayerKey.y * zoom,
     };