import react from 'react';
import Viewport from './viewport';

const Map: react.FC<{}> = (props: {}) => {
  return (
    <Viewport>
      <div>
      <div style={{ height: '256px' }}>
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11720/10052.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11721/10052.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11722/10052.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11723/10052.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
        </div>
        <div style={{ height: '256px' }}>
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11720/10053.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11721/10053.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11722/10053.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11723/10053.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
        </div>
        <div style={{ height: '256px' }}>
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11720/10054.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11721/10054.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11722/10054.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
          <img
            alt=''
            role='presentation'
            src='https://tile.openstreetmap.org/14/11723/10054.png'
            style={{ width: '256px', height: '256px', opacity: 1 }}
          />
        </div>

      </div>
    </Viewport>
  );
};

export default Map;