]> git.localhorst.tv Git - alttp.git/blobdiff - resources/js/components/pages/Map.js
store map position in history
[alttp.git] / resources / js / components / pages / Map.js
index cbd3581d8d4a90c1266d2c74a4bff2451a1fcc95..3cbd31f6025367f1bb98f3d16f3adc7e8f245cb2 100644 (file)
@@ -2,13 +2,19 @@ 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';
 import List from '../map/List';
 import OpenSeadragon from '../map/OpenSeadragon';
 import Pins from '../map/Pins';
+import UWSuperTiles from '../map/UWSuperTiles';
 
 const Map = () => {
+       const [uwOverlay, setUWOverlay] = React.useState(false);
+
+       const { activeMap } = useParams();
        const container = React.useRef();
        const { t } = useTranslation();
 
@@ -17,13 +23,15 @@ const Map = () => {
                        <title>{t('map.heading')}</title>
                        <meta name="description" content={t('map.description')} />
                </Helmet>
+               <CanonicalLinks base={`/map/${activeMap}`} />
                <OpenSeadragon ref={container}>
-                       <div className="d-flex align-items-center justify-content-between">
+                       <div className="d-flex align-items-start justify-content-between">
                                <h1>{t('map.heading')}</h1>
-                               <Buttons />
+                               <Buttons setUWOverlay={setUWOverlay} uwOverlay={uwOverlay} />
                        </div>
                        <div ref={container} style={{ height: '80vh' }} />
                        <Pins />
+                       <UWSuperTiles show={uwOverlay} />
                        <List />
                </OpenSeadragon>
        </Container>;