Check spelling

src/components/map/TiledLayer.tsx

@@ -1,16 +1,22 @@
 import react from 'react';
 
-import { TileKey } from './types';
+import { Rectangle, TileKeyObject } from './types';
 
 export interface TiledLayerProperties {
   /** The key of the first (ie top/left) tile */
-  key: TileKey;
+  keyObject: TileKeyObject;
   /** Number of tiles (in each direction since TiledLayers are square)*/
   nbTiles: number;
+  /** The current viewport expressed in tiles coordinates */
+  viewPort: Rectangle;
 }
 
 /**
- * A lazyly loaded square layer of tiles.
+ * A lazily loaded square layer of tiles.
+ *
+ * This component is rather dumb and is mainly a sparse array of tiles.
+ * New tiles are added to the array when the viewport is updated and they stay in the array until
+ * the component is destroyed or its number of tiles is updated.
  *
  */
 export const TiledLayer: react.FC<TiledLayerProperties> = (

src/components/map/types.ts

@@ -1,7 +1,7 @@
 /**
  * An identifier for tiles (can also be used for tile layers)
  */
-export interface TileKey {
+export interface TileKeyObject {
   /**A tile provider id ('osm', 'otm', ...) */
   provider: string;
   /**The zoom level (integer) */
@@ -11,3 +11,21 @@ export interface TileKey {
   /**The Y coordinate (integer) */
   y: number;
 }
+
+/**
+ * A point
+ */
+export interface Point {
+  /**The X coordinate (integer)*/
+  x: number;
+  /**The Y coordinate (integer) */
+  y: number;
+}
+
+/**
+ * A rectangle
+ */
+export interface Rectangle {
+  topLeft: Point;
+  bottomRight: Point;
+}