dyomedea/src/components/map/Map.tsx

33 lines
852 B
TypeScript
Raw Normal View History

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;