= (
if (!tiles.has(key)) {
tiles.set(
key,
-
- {tileFactory(keyObject)}
-
+
);
}
});
}
);
- globalThis.cacheForTiledLayer.set(key, tiles);
+ globalThis.cacheForTileSet.set(key, tiles);
}
return <>{Array.from(tiles.values())};
};
-export default TiledLayer;
+export default TileSet;
diff --git a/src/components/map/TiledLayer.test.tsx b/src/components/map/TiledLayer.test.tsx
deleted file mode 100644
index 4c44f74..0000000
--- a/src/components/map/TiledLayer.test.tsx
+++ /dev/null
@@ -1,356 +0,0 @@
-import { render } from '@testing-library/react';
-import TiledLayer from './TiledLayer';
-import { TileFactory } from './types';
-
-describe('The TiledLayer component ', () => {
- beforeEach(() => {
- globalThis.cacheForTiledLayer = new Map();
- });
-
- test('exposes the tiles needed per its viewport', () => {
- const { baseElement } = render(
-
- );
- // screen.debug();
- expect(baseElement).toMatchInlineSnapshot(`
-
-
-
-
-
-`);
- });
-
- test('adds more tiles when its viewport is updated without removing the previous ones', () => {
- const { baseElement, rerender } = render(
-
- );
- rerender(
-
- );
- // screen.debug();
- expect(baseElement).toMatchInlineSnapshot(`
-
-
-
-
-
-`);
- });
- test('is not reinitialized if its key isObject updated', () => {
- const { baseElement, rerender } = render(
-
- );
- rerender(
-
- );
- // screen.debug();
- expect(baseElement).toMatchInlineSnapshot(`
-
-
-
-
-
-`);
- });
- test('Also works with negative coordinates', () => {
- const { baseElement } = render(
-
- );
- // screen.debug();
- expect(baseElement).toMatchInlineSnapshot(`
-
-
-
-
-
-`);
- });
-});
diff --git a/src/components/map/tile-factory.tsx b/src/components/map/tile-factory.tsx
deleted file mode 100644
index 400c299..0000000
--- a/src/components/map/tile-factory.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Tile from './Tile';
-import { TileFactory, TileKeyObject } from './types';
-
-/**
- *
- * @param keyObject The tile identifier
- * @returns The `` component
- */
-export const tileFactory: TileFactory = (keyObject:TileKeyObject) => (
-
-);
-
-export default tileFactory;
diff --git a/src/components/map/tile-providers.tsx b/src/components/map/tile-providers.tsx
new file mode 100644
index 0000000..93add60
--- /dev/null
+++ b/src/components/map/tile-providers.tsx
@@ -0,0 +1,146 @@
+import Tile from './Tile';
+import { TileFactory, TileKeyObject } from './types';
+
+export interface TileProvider {
+ name: string;
+ minZoom: number;
+ maxZoom: number;
+ getTileUrl: { (zoom: number, x: number, y: number): string };
+}
+
+const getRandomItem = (items: any[]) => {
+ const idx = Math.floor(Math.random() * items.length);
+ return items[idx];
+};
+
+const abc = ['a', 'b', 'c'];
+
+const tileProviders: any = {
+ osm: {
+ name: 'Open Street Map',
+ minZoom: 0,
+ maxZoom: 19,
+ getTileUrl: (zoom: number, x: number, y: number) =>
+ 'https://tile.openstreetmap.org/' + zoom + '/' + x + '/' + y + '.png',
+ },
+ osmfr: {
+ name: 'Open Street Map France',
+ minZoom: 0,
+ maxZoom: 20,
+ getTileUrl: (zoom: number, x: number, y: number) =>
+ 'https://' +
+ getRandomItem(abc) +
+ '.tile.openstreetmap.fr/osmfr/' +
+ zoom +
+ '/' +
+ x +
+ '/' +
+ y +
+ '.png',
+ },
+ otm: {
+ name: 'Open Topo Map',
+ minZoom: 2,
+ maxZoom: 17,
+ getTileUrl: (zoom: number, x: number, y: number) =>
+ 'https://' +
+ getRandomItem(abc) +
+ '.tile.opentopomap.org/' +
+ zoom +
+ '/' +
+ x +
+ '/' +
+ y +
+ '.png',
+ },
+ cyclosm: {
+ name: 'CyclOSM',
+ minZoom: 0,
+ maxZoom: 19,
+ getTileUrl: (zoom: number, x: number, y: number) =>
+ 'https://' +
+ getRandomItem(abc) +
+ '.tile-cyclosm.openstreetmap.fr/cyclosm/' +
+ zoom +
+ '/' +
+ x +
+ '/' +
+ y +
+ '.png',
+ },
+ //https://b.tile.openstreetmap.fr/openriverboatmap/20/535762/382966.png
+ openriverboatmap: {
+ name: 'Open River Boat Map',
+ minZoom: 0,
+ maxZoom: 20,
+ getTileUrl: (zoom: number, x: number, y: number) =>
+ 'https://' +
+ getRandomItem(abc) +
+ '.tile.openstreetmap.fr/openriverboatmap/' +
+ zoom +
+ '/' +
+ x +
+ '/' +
+ y +
+ '.png',
+ },
+
+ // cyclosmlite: {
+ // name: 'CyclOSM lite',
+ // minZoom: 0,
+ // maxZoom: 19,
+ // getTileUrl: (zoom: number, x: number, y: number) =>
+ // 'https://' +
+ // getRandomItem(abc) +
+ // '.tile-cyclosm.openstreetmap.fr/cyclosm-lite/' +
+ // zoom +
+ // '/' +
+ // x +
+ // '/' +
+ // y +
+ // '.png',
+ // },
+ // esrisat: {
+ // name: 'ESRI Satellite',
+ // minZoom: 0,
+ // maxZoom: 19,
+ // getTileUrl: (zoom: number, x: number, y: number) =>
+ // 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/' +
+ // zoom +
+ // '/' +
+ // x +
+ // '/' +
+ // y +
+ // '.jpg',
+ // },
+
+ fake: {
+ name: 'Fake provider',
+ minZoom: 0,
+ maxZoom: 20,
+ getTileUrl: (zoom: number, x: number, y: number) =>
+ 'https://fakeurl/' + zoom + '/' + x + '/' + y + '.png',
+ },
+};
+
+const mod = (n: number, m: number) => {
+ const jsMod = n % m;
+ return jsMod >= 0 ? jsMod : jsMod + m;
+};
+
+/**
+ *
+ * @param keyObject The tile identifier
+ * @returns The ``'s URL 'as a string)
+ */
+export const getTileUrl = (keyObject: TileKeyObject) => {
+ const nbTiles = 2 ** keyObject.zoomLevel;
+ const x = mod(keyObject.x, nbTiles);
+ const y = mod(keyObject.y, nbTiles);
+ return tileProviders[keyObject.provider].getTileUrl(
+ keyObject.zoomLevel,
+ x,
+ y
+ );
+};
+export default getTileUrl;