X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fpages%2FMap.js;h=8291ef2e982fc9a544fc8e4c6a4d4c51ad5b843c;hb=a0bca4306e882d77ba192eed889bd7ed52896dad;hp=44ac0a05f5a441e8ecd368ec1cb2a81b1a4b3590;hpb=cb6e69664f917891230a511608ceb568a5c176a0;p=alttp.git

diff --git a/resources/js/components/pages/Map.js b/resources/js/components/pages/Map.js
index 44ac0a0..8291ef2 100644
--- a/resources/js/components/pages/Map.js
+++ b/resources/js/components/pages/Map.js
@@ -1,27 +1,38 @@
 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();
 
-	React.useEffect(() => {
-		window.document.title = t('map.heading');
-	}, []);
-
 	return <Container fluid>
+		<Helmet>
+			<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-center justify-content-between">
-				<h1>{t('map.heading')}</h1>
-				<Buttons />
+			<div className="d-flex align-items-start justify-content-between">
+				<h1>{t('map.heading')} - {t(`map.${activeMap}Long`)}</h1>
+				<Buttons setUWOverlay={setUWOverlay} uwOverlay={uwOverlay} />
 			</div>
 			<div ref={container} style={{ height: '80vh' }} />
 			<Pins />
+			<UWSuperTiles show={uwOverlay} />
+			<List />
 		</OpenSeadragon>
 	</Container>;
 };