Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Bug fix.

This commit is contained in:
Eric van der Vlist 2022-10-17 18:30:26 +02:00
parent a5dc279e4e
commit ffa58ee303
2 changed files with 56 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/map/TiledLayer.test.tsx
View File

@ -2,7 +2,9 @@ import { render, screen } from '@testing-library/react';
import TiledLayer from './TiledLayer';
import { TileFactory } from './types';
const fakeTileFactory: TileFactory = (keyObject) => <></>;
const fakeTileFactory: TileFactory = (keyObject) => (
<text>{JSON.stringify(keyObject)}</text>
);
describe('The TiledLayer component ', () => {
test('exposes the tiles needed per its viewport', () => {
@ -22,13 +24,25 @@ describe('The TiledLayer component ', () => {
<svg>
<g
transform="translate(1, 2)"
/>
>
<text>
{"provider":"osm","zoomLevel":10,"x":6,"y":7}
</text>
</g>
<g
transform="translate(2, 2)"
/>
>
<text>
{"provider":"osm","zoomLevel":10,"x":7,"y":7}
</text>
</g>
<g
transform="translate(3, 2)"
/>
>
<text>
{"provider":"osm","zoomLevel":10,"x":8,"y":7}
</text>
</g>
</svg>
</div>
</body>
@ -61,22 +75,46 @@ describe('The TiledLayer component ', () => {
<svg>
<g
transform="translate(1, 2)"
/>
>
<text>
{"provider":"osm","zoomLevel":10,"x":6,"y":7}
</text>
</g>
<g
transform="translate(2, 2)"
/>
>
<text>
{"provider":"osm","zoomLevel":10,"x":7,"y":7}
</text>
</g>
<g
transform="translate(3, 2)"
/>
>
<text>
{"provider":"osm","zoomLevel":10,"x":8,"y":7}
</text>
</g>
<g
transform="translate(5, 0)"
/>
>
<text>
{"provider":"osm","zoomLevel":10,"x":10,"y":5}
</text>
</g>
<g
transform="translate(5, 1)"
/>
>
<text>
{"provider":"osm","zoomLevel":10,"x":10,"y":6}
</text>
</g>
<g
transform="translate(5, 2)"
/>
>
<text>
{"provider":"osm","zoomLevel":10,"x":10,"y":7}
</text>
</g>
</svg>
</div>
</body>

13
src/components/map/TiledLayer.tsx
View File

@ -35,15 +35,18 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
(row) => {
range(props.viewPort.topLeft.x, props.viewPort.bottomRight.x + 1).map(
(col) => {
const key = tileUri({
const keyObject = {
provider: props.keyObject.provider,
zoomLevel: props.keyObject.zoomLevel,
x: props.keyObject.x + row,
y: props.keyObject.x + col,
});
x: props.keyObject.x + col,
y: props.keyObject.x + row,
};
const key = tileUri(keyObject);
if (!Object.hasOwn(tiles.current, key)) {
tiles.current[key] = (
<g key={key} transform={`translate(${col}, ${row})`} />
<g key={key} transform={`translate(${col}, ${row})`}>
{props.tileFactory(keyObject)}
</g>
);
}
}