Adding docuri's and unit tests.

src/components/map/TiledLayer.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import TiledLayer from './TiledLayer';
+
+describe('The TiledLayer component ', () => {
+  test('', () => {
+    // const tiledLayer = renderer.create(
+    //   <TiledLayer
+    //     keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
+    //     viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
+    //   />
+    // );
+    // const tree = tiledLayer.toJSON();
+    // console.log(JSON.stringify(tree));
+
+    const { baseElement } = render(
+      <svg>
+        <TiledLayer
+          keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
+          viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
+        />
+      </svg>
+    );
+    screen.debug();
+    expect(baseElement).toMatchInlineSnapshot(`
+<body>
+  <div>
+    <svg>
+      <g
+        id="tile/osm/10/7/6"
+      />
+      <g
+        id="tile/osm/10/7/7"
+      />
+      <g
+        id="tile/osm/10/7/8"
+      />
+    </svg>
+  </div>
+</body>
+`);
+  });
+});

src/components/map/TiledLayer.tsx

@@ -1,12 +1,12 @@
-import react from 'react';
+import react, { useRef } from 'react';
+import { range } from 'lodash';
 
 import { Rectangle, TileKeyObject } from './types';
+import tileUri from './uris';
 
 export interface TiledLayerProperties {
   /** The key of the first (ie top/left) tile */
   keyObject: TileKeyObject;
-  /** Number of tiles (in each direction since TiledLayers are square)*/
-  nbTiles: number;
   /** The current viewport expressed in tiles coordinates */
   viewPort: Rectangle;
 }
@@ -22,7 +22,28 @@ export interface TiledLayerProperties {
 export const TiledLayer: react.FC<TiledLayerProperties> = (
   props: TiledLayerProperties
 ) => {
-  return <></>;
+  console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
+  const tiles = useRef<any>({});
+
+  range(props.viewPort.topLeft.y, props.viewPort.bottomRight.y + 1).map(
+    (row) => {
+      range(props.viewPort.topLeft.x, props.viewPort.bottomRight.x + 1).map(
+        (col) => {
+          const key = tileUri({
+            provider: props.keyObject.provider,
+            zoomLevel: props.keyObject.zoomLevel,
+            x: props.keyObject.x + row,
+            y: props.keyObject.x + col,
+          });
+          if (!Object.hasOwn(tiles.current, key)) {
+            tiles.current[key] = <g key={key} id={key} />;
+          }
+        }
+      );
+    }
+  );
+
+  return <>{Object.values(tiles.current)}</>;
 };
 
 export default TiledLayer;

src/components/map/uris.test.ts

@@ -0,0 +1,16 @@
+import tileUri from './uris';
+describe('Test that', () => {
+  test('uri generation is working', () => {
+    expect(tileUri({ provider: 'osm', zoomLevel: 16, x: 25, y: 52 })).toEqual(
+      'tile/osm/16/25/52'
+    );
+  });
+  test('uri parsing works', () => {
+    expect(tileUri('tile/otm/5/28/3')).toEqual({
+      provider: 'otm',
+      zoomLevel: 5,
+      x: 28,
+      y: 3,
+    });
+  });
+});

src/components/map/uris.ts

@@ -0,0 +1,21 @@
+import { route } from 'docuri';
+
+/**
+ * A [docuri](https://github.com/jo/docuri) route for {@link components/map/types!TileKeyObject}
+ * 
+ * TODO: update docuri (or write a wrapper) to support datatyping (and formats).
+ */
+export const tileUri = (rte: any) => {
+  const r = route('tile/:provider/:zoomLevel/:x/:y')(rte);
+  if (typeof r === 'object') {
+    return {
+      provider: r.provider,
+      zoomLevel: parseInt(r.zoomLevel),
+      x: parseInt(r.x),
+      y: parseInt(r.y),
+    };
+  }
+  return r;
+};
+
+export default tileUri;

src/missing-typedefs/docuri.d.ts

@@ -0,0 +1 @@
+declare module 'docuri';