resources/js/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 import { useParams } from 'react-router';
   6
   7 import CanonicalLinks from '../components/common/CanonicalLinks';
   8 import Buttons from '../components/map/Buttons';
   9 import List from '../components/map/List';
  10 import OpenSeadragon from '../components/map/OpenSeadragon';
  11 import Pins from '../components/map/Pins';
  12 import UWSuperTiles from '../components/map/UWSuperTiles';
  13
  14 export const Component = () => {
  15         const [uwOverlay, setUWOverlay] = React.useState(false);
  16
  17         const { activeMap } = useParams();
  18         const container = React.useRef();
  19         const { t } = useTranslation();
  20
  21         return <Container fluid>
  22                 <Helmet>
  23                         <title>{t('map.heading')} - {t(`map.${activeMap}Long`)}</title>
  24                         <meta name="description" content={t('map.description')} />
  25                 </Helmet>
  26                 <CanonicalLinks base={`/map/${activeMap}`} />
  27                 <OpenSeadragon ref={container}>
  28                         <div className="d-flex align-items-start justify-content-between">
  29                                 <h1>{t('map.heading')} - {t(`map.${activeMap}Long`)}</h1>
  30                                 <Buttons setUWOverlay={setUWOverlay} uwOverlay={uwOverlay} />
  31                         </div>
  32                         <div ref={container} style={{ height: '80vh' }} />
  33                         <Pins />
  34                         <UWSuperTiles show={uwOverlay} />
  35                         <List />
  36                 </OpenSeadragon>
  37         </Container>;
  38 };