= (props: MapProperties) => {
shift={shift}
zoom={zoom}
layers={[
- { key: 'tiles', content: },
+ { key: 'tiles', content: tiledLayer },
{ key: 'circle', content: },
]}
/>
diff --git a/svgmap/src/components/map/SlippyBoard.tsx b/svgmap/src/components/map/SlippyBoard.tsx
index 7116a59..584c7f5 100644
--- a/svgmap/src/components/map/SlippyBoard.tsx
+++ b/svgmap/src/components/map/SlippyBoard.tsx
@@ -4,7 +4,7 @@ interface SlippyBoardProperties {
boardSize: number;
shift: { x: number; y: number };
zoom: number;
- layers?: { key: string; content: ReactElement }[];
+ layers?: { key: string; content: ReactElement | ReactElement[] }[];
}
const SlippyBoard: react.FC = (
@@ -16,9 +16,7 @@ const SlippyBoard: react.FC = (
transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
>
{props.layers
- ? props.layers.map((layer) => (
- {layer.content}
- ))
+ ? props.layers.map((layer) => {layer.content})
: null}
diff --git a/svgmap/src/components/map/Tile.tsx b/svgmap/src/components/map/Tile.tsx
new file mode 100644
index 0000000..ede3a27
--- /dev/null
+++ b/svgmap/src/components/map/Tile.tsx
@@ -0,0 +1,39 @@
+import react, { useEffect, useState } from 'react';
+
+interface TileProperties {
+ href: string;
+ delay?: number;
+}
+
+const Tile: react.FC = (props: TileProperties) => {
+ const [ready, setReady] = useState(false);
+
+ const timeout = (ms: number) => {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+ };
+
+ useEffect(() => {
+ const loadImage = async () => {
+ console.log(`Pre loading: ${JSON.stringify(props.href)}`);
+ const image = new Image(256, 256);
+ image.loading = 'eager';
+ image.src = props.href;
+ if (!image.complete) {
+ await image.decode();
+ }
+ if (props.delay !== undefined) {
+ await timeout(props.delay);
+ }
+ setReady(true);
+ };
+ loadImage();
+ });
+
+ return ready ? (
+
+ ) : (
+ <>>
+ );
+};
+
+export default Tile;
diff --git a/svgmap/src/components/map/TiledLayer.tsx b/svgmap/src/components/map/TiledLayer.tsx
deleted file mode 100644
index a4863eb..0000000
--- a/svgmap/src/components/map/TiledLayer.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import react from 'react';
-
-interface TiledLayerProperties {}
-
-const TiledLayer: react.FC = (
- props: TiledLayerProperties
-) => {
- return ;
-};
-
-export default TiledLayer;