From ffa58ee303277ad2035be32ecf1d08951320e674 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Mon, 17 Oct 2022 18:30:26 +0200
Subject: [PATCH] Bug fix.

---
 src/components/map/TiledLayer.test.tsx | 58 +++++++++++++++++++++-----
 src/components/map/TiledLayer.tsx      | 13 +++---
 2 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/src/components/map/TiledLayer.test.tsx b/src/components/map/TiledLayer.test.tsx
index 81bc9a9..ba02f58 100644
--- a/src/components/map/TiledLayer.test.tsx
+++ b/src/components/map/TiledLayer.test.tsx
@@ -2,7 +2,9 @@ import { render, screen } from '@testing-library/react';
 import TiledLayer from './TiledLayer';
 import { TileFactory } from './types';
 
-const fakeTileFactory: TileFactory = (keyObject) => <></>;
+const fakeTileFactory: TileFactory = (keyObject) => (
+  <text>{JSON.stringify(keyObject)}</text>
+);
 
 describe('The TiledLayer component ', () => {
   test('exposes the tiles needed per its viewport', () => {
@@ -22,13 +24,25 @@ describe('The TiledLayer component ', () => {
     <svg>
       <g
         transform="translate(1, 2)"
-      />
+      >
+        <text>
+          {"provider":"osm","zoomLevel":10,"x":6,"y":7}
+        </text>
+      </g>
       <g
         transform="translate(2, 2)"
-      />
+      >
+        <text>
+          {"provider":"osm","zoomLevel":10,"x":7,"y":7}
+        </text>
+      </g>
       <g
         transform="translate(3, 2)"
-      />
+      >
+        <text>
+          {"provider":"osm","zoomLevel":10,"x":8,"y":7}
+        </text>
+      </g>
     </svg>
   </div>
 </body>
@@ -61,22 +75,46 @@ describe('The TiledLayer component ', () => {
     <svg>
       <g
         transform="translate(1, 2)"
-      />
+      >
+        <text>
+          {"provider":"osm","zoomLevel":10,"x":6,"y":7}
+        </text>
+      </g>
       <g
         transform="translate(2, 2)"
-      />
+      >
+        <text>
+          {"provider":"osm","zoomLevel":10,"x":7,"y":7}
+        </text>
+      </g>
       <g
         transform="translate(3, 2)"
-      />
+      >
+        <text>
+          {"provider":"osm","zoomLevel":10,"x":8,"y":7}
+        </text>
+      </g>
       <g
         transform="translate(5, 0)"
-      />
+      >
+        <text>
+          {"provider":"osm","zoomLevel":10,"x":10,"y":5}
+        </text>
+      </g>
       <g
         transform="translate(5, 1)"
-      />
+      >
+        <text>
+          {"provider":"osm","zoomLevel":10,"x":10,"y":6}
+        </text>
+      </g>
       <g
         transform="translate(5, 2)"
-      />
+      >
+        <text>
+          {"provider":"osm","zoomLevel":10,"x":10,"y":7}
+        </text>
+      </g>
     </svg>
   </div>
 </body>
diff --git a/src/components/map/TiledLayer.tsx b/src/components/map/TiledLayer.tsx
index 68f0b55..d672b8e 100644
--- a/src/components/map/TiledLayer.tsx
+++ b/src/components/map/TiledLayer.tsx
@@ -35,15 +35,18 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
     (row) => {
       range(props.viewPort.topLeft.x, props.viewPort.bottomRight.x + 1).map(
         (col) => {
-          const key = tileUri({
+          const keyObject = {
             provider: props.keyObject.provider,
             zoomLevel: props.keyObject.zoomLevel,
-            x: props.keyObject.x + row,
-            y: props.keyObject.x + col,
-          });
+            x: props.keyObject.x + col,
+            y: props.keyObject.x + row,
+          };
+          const key = tileUri(keyObject);
           if (!Object.hasOwn(tiles.current, key)) {
             tiles.current[key] = (
-              <g key={key} transform={`translate(${col}, ${row})`} />
+              <g key={key} transform={`translate(${col}, ${row})`}>
+                {props.tileFactory(keyObject)}
+              </g>
             );
           }
         }