42 lines
799 B
TypeScript
42 lines
799 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;
|
|
delta: any;
|
|
zoom: number;
|
|
}> = (props: {
|
|
ix: number;
|
|
iy: number;
|
|
x: number;
|
|
y: number;
|
|
delta: any;
|
|
zoom: number;
|
|
}) => {
|
|
const style = {
|
|
width: tileSize + 'px',
|
|
height: tileSize + 'px',
|
|
transform:
|
|
'translate3d(' +
|
|
(props.ix * tileSize - props.delta.X) +
|
|
'px, ' +
|
|
(props.iy * tileSize - props.delta.Y) +
|
|
'px, 0px)',
|
|
};
|
|
return (
|
|
<img
|
|
src={tileProvider(props.zoom, props.x, props.y)}
|
|
style={style}
|
|
alt=''
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Tile;
|