From a5dc279e4efc0c013dd16666fe40f596ebe21add Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Mon, 17 Oct 2022 18:17:13 +0200
Subject: [PATCH] Adding the notion of TileFactory

---
 src/components/map/TiledLayer.test.tsx | 6 ++++++
 src/components/map/TiledLayer.tsx      | 4 +++-
 src/components/map/types.ts            | 6 ++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/map/TiledLayer.test.tsx b/src/components/map/TiledLayer.test.tsx
index 5f5fbf6..81bc9a9 100644
--- a/src/components/map/TiledLayer.test.tsx
+++ b/src/components/map/TiledLayer.test.tsx
@@ -1,5 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import TiledLayer from './TiledLayer';
+import { TileFactory } from './types';
+
+const fakeTileFactory: TileFactory = (keyObject) => <></>;
 
 describe('The TiledLayer component ', () => {
   test('exposes the tiles needed per its viewport', () => {
@@ -8,6 +11,7 @@ describe('The TiledLayer component ', () => {
         <TiledLayer
           keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
           viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
+          tileFactory={fakeTileFactory}
         />
       </svg>
     );
@@ -37,6 +41,7 @@ describe('The TiledLayer component ', () => {
         <TiledLayer
           keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
           viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
+          tileFactory={fakeTileFactory}
         />
       </svg>
     );
@@ -45,6 +50,7 @@ describe('The TiledLayer component ', () => {
         <TiledLayer
           keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
           viewPort={{ topLeft: { x: 5, y: 0 }, bottomRight: { x: 5, y: 2 } }}
+          tileFactory={fakeTileFactory}
         />
       </svg>
     );
diff --git a/src/components/map/TiledLayer.tsx b/src/components/map/TiledLayer.tsx
index 4c34858..68f0b55 100644
--- a/src/components/map/TiledLayer.tsx
+++ b/src/components/map/TiledLayer.tsx
@@ -1,7 +1,7 @@
 import react, { useRef } from 'react';
 import { range } from 'lodash';
 
-import { Rectangle, TileKeyObject } from './types';
+import { Rectangle, TileFactory, TileKeyObject } from './types';
 import tileUri from './uris';
 
 export interface TiledLayerProperties {
@@ -9,6 +9,8 @@ export interface TiledLayerProperties {
   keyObject: TileKeyObject;
   /** The current viewport expressed in tiles coordinates */
   viewPort: Rectangle;
+  /** The factory to create tiles */
+  tileFactory: TileFactory;
 }
 
 /**
diff --git a/src/components/map/types.ts b/src/components/map/types.ts
index 3fe0f9a..a2af287 100644
--- a/src/components/map/types.ts
+++ b/src/components/map/types.ts
@@ -29,3 +29,9 @@ export interface Rectangle {
   topLeft: Point;
   bottomRight: Point;
 }
+
+/**
+ * A function which creates tiles
+ * @param keyObject - the {@link TileKeyObject} identifying the tile.
+ */
+export type TileFactory = (keyObject: TileKeyObject) => any;