import { Container } from 'react-bootstrap';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router';
+import CanonicalLinks from '../common/CanonicalLinks';
import Buttons from '../map/Buttons';
import List from '../map/List';
import OpenSeadragon from '../map/OpenSeadragon';
const Map = () => {
const [uwOverlay, setUWOverlay] = React.useState(false);
+ const { activeMap } = useParams();
const container = React.useRef();
const { t } = useTranslation();
return <Container fluid>
<Helmet>
- <title>{t('map.heading')}</title>
+ <title>{t('map.heading')} - {t(`map.${activeMap}Long`)}</title>
<meta name="description" content={t('map.description')} />
</Helmet>
+ <CanonicalLinks base={`/map/${activeMap}`} />
<OpenSeadragon ref={container}>
<div className="d-flex align-items-start justify-content-between">
- <h1>{t('map.heading')}</h1>
+ <h1>{t('map.heading')} - {t(`map.${activeMap}Long`)}</h1>
<Buttons setUWOverlay={setUWOverlay} uwOverlay={uwOverlay} />
</div>
<div ref={container} style={{ height: '80vh' }} />