show map name in title/heading

[alttp.git] / resources / js / components / pages / Map.js

diff --git a/resources/js/components/pages/Map.js b/resources/js/components/pages/Map.js
index 09e381a3af8bcb3c9a2ea67b9c15571dc585495d..8291ef2e982fc9a544fc8e4c6a4d4c51ad5b843c 100644 (file)
--- a/resources/js/components/pages/Map.js
+++ b/resources/js/components/pages/Map.js
@@ -2,6 +2,7 @@ import React from 'react';
 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';
@@ -13,18 +14,19 @@ import UWSuperTiles from '../map/UWSuperTiles';
 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" />
+               <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' }} />