Pushing map coordinated down to tiles.

svgmap/src/components/map/Map.tsx

@@ -8,11 +8,22 @@ import SingleTouchHandler from './SingleTouchHandler';
 import DoubleTouchHandler from './DoubleTouchHandler';
 import TiledLayersStack from './TiledLayersStack';
 
+export interface TiledLayerKey {
+  provider: string;
+  zoomLevel: number;
+  x: number;
+  y: number;
+}
+
 interface MapProperties {
   height: number;
   width: number;
 }
 
+export const tiledLayerKeyToString = (tiledLayerKey: TiledLayerKey) => {
+  return `${tiledLayerKey.provider}/${tiledLayerKey.zoomLevel}/${tiledLayerKey.x}/${tiledLayerKey.y}`;
+};
+
 const Map: react.FC<MapProperties> = (props: MapProperties) => {
   const nbTiles =
     Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
@@ -21,6 +32,13 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
   const [shift, setShift] = useState({ x: -boardSize / 2, y: -boardSize / 2 });
   const [zoom, setZoom] = useState(1);
 
+  const [tiledLayerKey, setTiledLayerKey] = useState({
+    provider: 'osm',
+    zoomLevel: 16,
+    x: 33488,
+    y: 23939,
+  });
+
   const addShift = (deltaShift: { x: number; y: number }) => {
     setShift({ x: shift.x + deltaShift.x, y: shift.y + deltaShift.y });
   };
@@ -37,8 +55,6 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
     setZoom(zoom * zoomFactor);
   };
 
-  const [baseZoomLevel, setBaseZoomLevel] = useState(10);
-
   console.log(`Rendering Map, zoom:${zoom}, shift:${JSON.stringify(shift)}`);
 
   return (
@@ -88,8 +104,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
               tileSize={256}
               key='tiled-layers'
               numberOfZoomLevels={5}
-              baseZoomLevel={baseZoomLevel}
-              setBaseZoomLevel={setBaseZoomLevel}
+              tiledLayerKeyState={[tiledLayerKey, setTiledLayerKey]}
             />
             <circle key='circle' cx='50' cy='50' r='50' />,
           </>

svgmap/src/components/map/Tile.tsx

@@ -1,4 +1,5 @@
 import react, { useEffect, useRef } from 'react';
+import { TiledLayerKey } from './Map';
 
 interface TileProperties {
   href?: string;
@@ -6,6 +7,7 @@ interface TileProperties {
   y: number;
   tileSize: number;
   delay?: number;
+  tileKey: TiledLayerKey;
 }
 
 const Tile: react.FC<TileProperties> = (props: TileProperties) => {

svgmap/src/components/map/TiledLayer.tsx

@@ -1,6 +1,7 @@
 import react, { useEffect, useState } from 'react';
 import Tile from './Tile';
 import fakeTile from './FakeTile.svg';
+import { TiledLayerKey, tiledLayerKeyToString } from './Map';
 
 interface Point {
   x: number;
@@ -16,6 +17,7 @@ interface TiledLayerProperties {
   tileSize: number;
   nbTiles: number;
   active: boolean;
+  tiledLayerKey: TiledLayerKey;
 }
 
 const TiledLayer: react.FC<TiledLayerProperties> = (
@@ -25,7 +27,13 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
   for (let row = 0; row < props.nbTiles; row++) {
     let tileRow = [];
     for (let col = 0; col < props.nbTiles; col++) {
-      tileRow.push(<g key={`${row}/${col}`} />);
+      const tileKey: TiledLayerKey = {
+        provider: props.tiledLayerKey.provider,
+        zoomLevel: props.tiledLayerKey.zoomLevel,
+        x: props.tiledLayerKey.x + col,
+        y: props.tiledLayerKey.y + row,
+      };
+      tileRow.push(<g key={tiledLayerKeyToString(tileKey)} />);
     }
     initialTiles.push(tileRow);
   }
@@ -68,7 +76,12 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
       for (let row = 0; row < props.nbTiles; row++) {
         let tileRow = [];
         for (let col = 0; col < props.nbTiles; col++) {
-          const key = `${row}/${col}`;
+          const tileKey: TiledLayerKey = {
+            provider: props.tiledLayerKey.provider,
+            zoomLevel: props.tiledLayerKey.zoomLevel,
+            x: props.tiledLayerKey.x + col,
+            y: props.tiledLayerKey.y + row,
+          };
           if (
             tiles[row][col].type === 'g' &&
             row >= firstVisibleTiles.y &&
@@ -79,7 +92,8 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
             console.log(`Adding tile ${row}/${col}`);
             tileRow.push(
               <Tile
-                key={key}
+                key={tiledLayerKeyToString(tileKey)}
+                tileKey={tileKey}
                 href={fakeTile}
                 x={col * props.tileSize}
                 y={row * props.tileSize}

svgmap/src/components/map/TiledLayersStack.tsx

@@ -1,5 +1,6 @@
 import react from 'react';
 import TiledLayer from './TiledLayer';
+import { TiledLayerKey, tiledLayerKeyToString } from './Map';
 
 interface Point {
   x: number;
@@ -13,13 +14,16 @@ interface TiledLayersStackProperties {
   zoom: number;
   tileSize: number;
   numberOfZoomLevels?: number;
-  baseZoomLevel: number;
-  setBaseZoomLevel: (baseZoomLevel: number) => void;
+  tiledLayerKeyState: [TiledLayerKey, (tiledLayerKey: TiledLayerKey) => void];
 }
 
 const TiledLayersStack: react.FC<TiledLayersStackProperties> = (
   props: TiledLayersStackProperties
 ) => {
+  console.log(`Rendering TiledLayersStack`);
+
+  const [tiledLayerKey, setTiledLayerKey] = props.tiledLayerKeyState;
+
   const numberOfZoomLevels =
     props.numberOfZoomLevels === undefined
       ? 1
@@ -43,9 +47,16 @@ const TiledLayersStack: react.FC<TiledLayersStackProperties> = (
 
   const getTiledLayer = (zoomLevel: number, isActive: boolean) => {
     const zoom = 2 ** (zoomLevel - safetyZoomLevels);
+    const currentTiledLayerKey = {
+      provider: tiledLayerKey.provider,
+      zoomLevel: zoomLevel + tiledLayerKey.zoomLevel,
+      x: tiledLayerKey.x * zoom,
+      y: tiledLayerKey.y * zoom,
+    };
     return (
       <TiledLayer
-        key={`layer${zoomLevel + props.baseZoomLevel}`}
+        key={tiledLayerKeyToString(currentTiledLayerKey)}
+        tiledLayerKey={currentTiledLayerKey}
         height={props.height * zoom}
         width={props.width * zoom}
         shift={{