2022-10-17 08:37:26 +00:00
|
|
|
import react from 'react';
|
2022-10-17 20:37:07 +00:00
|
|
|
import Tile from './Tile';
|
|
|
|
import TiledLayer from './TiledLayer';
|
|
|
|
import { TileFactory } from './types';
|
2022-10-17 08:37:26 +00:00
|
|
|
|
2022-10-17 10:04:25 +00:00
|
|
|
export interface MapProperties {}
|
2022-10-17 08:37:26 +00:00
|
|
|
|
2022-10-17 10:04:25 +00:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @returns A Map component
|
|
|
|
*/
|
|
|
|
export const Map: react.FC<MapProperties> = (props: MapProperties) => {
|
2022-10-17 20:37:07 +00:00
|
|
|
const simpleTileFactory: TileFactory = (keyObject) => (
|
|
|
|
<Tile
|
|
|
|
href={`https://tile.openstreetmap.org/${keyObject.zoomLevel}/${keyObject.x}/${keyObject.y}.png`}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<svg width={window.innerWidth} height={window.innerHeight}>
|
|
|
|
<g transform='scale(256)'>
|
|
|
|
<TiledLayer
|
|
|
|
keyObject={{ provider: 'osm', zoomLevel: 16, x: 33488, y: 23939 }}
|
|
|
|
viewPort={{ topLeft: { x: 0, y: 0 }, bottomRight: { x: 10, y: 10 } }}
|
|
|
|
tileFactory={simpleTileFactory}
|
|
|
|
/>
|
|
|
|
</g>
|
|
|
|
</svg>
|
|
|
|
);
|
2022-10-17 08:37:26 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default Map;
|