Adding the notion of TileFactory

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

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;
 }
 
 /**

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;