Adding typedoc in the loop

src/App.tsx

@@ -1,7 +1,6 @@
 import { Redirect, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import Home from './pages/Home';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -25,6 +24,10 @@ import Map from './components/map/Map';
 
 setupIonicReact();
 
+/**
+ *
+ * @returns The root app component
+ */
 const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>

src/components/map/Map.tsx

@@ -1,8 +1,12 @@
 import react from 'react';
 
-interface MapProperties {}
+export interface MapProperties {}
 
-const Map: react.FC<MapProperties> = (props: MapProperties) => {
+/**
+ *
+ * @returns A Map component
+ */
+export const Map: react.FC<MapProperties> = (props: MapProperties) => {
   return <></>;
 };
 

src/components/map/TiledLayer.tsx

@@ -0,0 +1,22 @@
+import react from 'react';
+
+import { TileKey } from './types';
+
+export interface TiledLayerProperties {
+  /** The key of the first (ie top/left) tile */
+  key: TileKey;
+  /** Number of tiles (in each direction since TiledLayers are square)*/
+  nbTiles: number;
+}
+
+/**
+ * A lazyly loaded square layer of tiles.
+ *
+ */
+export const TiledLayer: react.FC<TiledLayerProperties> = (
+  props: TiledLayerProperties
+) => {
+  return <></>;
+};
+
+export default TiledLayer;

src/components/map/types.ts

@@ -0,0 +1,13 @@
+/**
+ * An identifier for tiles (can also be used for tile layers)
+ */
+export interface TileKey {
+  /**A tile provider id ('osm', 'otm', ...) */
+  provider: string;
+  /**The zoom level (integer) */
+  zoomLevel: number;
+  /**The X coordinate (integer)*/
+  x: number;
+  /**The Y coordinate (integer) */
+  y: number;
+}

src/pages/Home.tsx

@@ -1,5 +1,10 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import ExploreContainer from '../components/ExploreContainer';
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
 import './Home.css';
 
 const Home: React.FC = () => {
@@ -11,12 +16,11 @@ const Home: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonHeader collapse="condense">
+        <IonHeader collapse='condense'>
           <IonToolbar>
-            <IonTitle size="large">Blank</IonTitle>
+            <IonTitle size='large'>Blank</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <ExploreContainer />
       </IonContent>
     </IonPage>
   );