38 lines
808 B
TypeScript
38 lines
808 B
TypeScript
import React from 'react';
|
|
import { tileSize } from './map';
|
|
|
|
const tileProvider = (zoom: number, x: number, y: number) =>
|
|
'https://tile.openstreetmap.org/' + zoom + '/' + x + '/' + y + '.png';
|
|
|
|
const Tile: React.FC<{
|
|
ix: number;
|
|
iy: number;
|
|
x: number;
|
|
y: number;
|
|
deltaX: number;
|
|
deltaY: number;
|
|
zoom: number;
|
|
}> = (props: {
|
|
ix: number;
|
|
iy: number;
|
|
x: number;
|
|
y: number;
|
|
deltaX: number;
|
|
deltaY: number;
|
|
zoom: number;
|
|
}) => {
|
|
const style = {
|
|
width: tileSize + 'px',
|
|
height: tileSize + 'px',
|
|
transform:
|
|
'translate3d(' +
|
|
(props.ix - props.deltaX -1) * tileSize +
|
|
'px, ' +
|
|
(props.iy - props.deltaY -1) * tileSize +
|
|
'px, 0px)',
|
|
};
|
|
return <img src={tileProvider(props.zoom, props.x, props.y)} style={style} />;
|
|
};
|
|
|
|
export default Tile;
|