From 0b7de58a4e3acded1312ae519774a811f8f813ed Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Mon, 17 Oct 2022 13:47:35 +0200
Subject: [PATCH] Check spelling

---
 README.md                         |  6 +++---
 src/components/map/TiledLayer.tsx | 12 +++++++++---
 src/components/map/types.ts       | 20 +++++++++++++++++++-
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 09641e5..a028971 100644
--- a/README.md
+++ b/README.md
@@ -32,13 +32,13 @@ SVG is very generic and is used to draw 2D figures in HTML applications and does
 
 KML, GeoJSON and OSM elements have been designed to represent generic geographical points and shapes. 
 
-GPX is more specific, having been designed to represent routes and tracks and its semantices are directly useable in our application.
+GPX is more specific, having been designed to represent routes and tracks and its semantics are directly useable in our application.
 
-The strucure of our components and indexes can therefore follow the GPX format.
+The structure of our components and indexes can therefore follow the GPX format.
 
 OSM elements is interesting to extract information from the OSM DB, either by querying their API or by downloading portions of the database.
 
-GeoJSON might be of interest as an intermediate format since a number of JS libraries have been developped to perform queries or draw GeoJSON data as SVG.
+GeoJSON might be of interest as an intermediate format since a number of JS libraries have been developed to perform queries or draw GeoJSON data as SVG.
 
 KML might be considered as an import format.
 
diff --git a/src/components/map/TiledLayer.tsx b/src/components/map/TiledLayer.tsx
index adc101d..a7ace2e 100644
--- a/src/components/map/TiledLayer.tsx
+++ b/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> = (
diff --git a/src/components/map/types.ts b/src/components/map/types.ts
index 5492673..3fe0f9a 100644
--- a/src/components/map/types.ts
+++ b/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;
+}