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