1 import React from 'react';
2 import { Container } from 'react-bootstrap';
3 import { Helmet } from 'react-helmet';
4 import { useTranslation } from 'react-i18next';
6 import CanonicalLinks from '../common/CanonicalLinks';
7 import Buttons from '../map/Buttons';
8 import List from '../map/List';
9 import OpenSeadragon from '../map/OpenSeadragon';
10 import Pins from '../map/Pins';
11 import UWSuperTiles from '../map/UWSuperTiles';
14 const [uwOverlay, setUWOverlay] = React.useState(false);
16 const container = React.useRef();
17 const { t } = useTranslation();
19 return <Container fluid>
21 <title>{t('map.heading')}</title>
22 <meta name="description" content={t('map.description')} />
24 <CanonicalLinks base="/map" />
25 <OpenSeadragon ref={container}>
26 <div className="d-flex align-items-start justify-content-between">
27 <h1>{t('map.heading')}</h1>
28 <Buttons setUWOverlay={setUWOverlay} uwOverlay={uwOverlay} />
30 <div ref={container} style={{ height: '80vh' }} />
32 <UWSuperTiles show={uwOverlay} />