resources/js/components/pages/Map.js

   1 import React from 'react';
   2 import { Container } from 'react-bootstrap';
   3 import { Helmet } from 'react-helmet';
   4 import { useTranslation } from 'react-i18next';
   5
   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';
  12
  13 const Map = () => {
  14         const [uwOverlay, setUWOverlay] = React.useState(false);
  15
  16         const container = React.useRef();
  17         const { t } = useTranslation();
  18
  19         return <Container fluid>
  20                 <Helmet>
  21                         <title>{t('map.heading')}</title>
  22                         <meta name="description" content={t('map.description')} />
  23                 </Helmet>
  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} />
  29                         </div>
  30                         <div ref={container} style={{ height: '80vh' }} />
  31                         <Pins />
  32                         <UWSuperTiles show={uwOverlay} />
  33                         <List />
  34                 </OpenSeadragon>
  35         </Container>;
  36 };
  37
  38 export default Map;