Test using real tiles.

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,15 +18,13 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
   };
 
   useEffect(() => {
-    if (props.href !== undefined) {
     const loadImage = async () => {
-        console.log(`Pre loading: ${JSON.stringify(props.href)}`);
+      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);
-        //      const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement;
-        //      const image = new SVGImageElement();
       image.loading = 'eager';
       // @ts-ignore
-        image.setAttribute('href', props.href);
+      image.setAttribute('href', href);
       if (!image.complete) {
         await image.decode();
       }
@@ -41,23 +38,11 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
       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');
+      svgImage.setAttribute('href', href);
       g.current?.replaceChildren(svgImage);
     };
     loadImage();
-    }
-  }, [props.href, props.delay, props.tileSize]);
-
-  // const children = useMemo(
-  //   () => (
-  //     <>
-  //       <g ref={g} transform={`translate(${props.x},${props.y})`} />
-  //     </>
-  //   ),
-  //   []
-  // );
+  }, [props.delay, props.tileSize]);
 
   return (
     <>

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 {

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,
     };