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

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

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