|
1 | | -import React from 'react'; |
| 1 | +import React, { useEffect, useState } from 'react'; |
2 | 2 | import clsx from 'clsx'; |
3 | 3 | import Layout from '@theme/Layout'; |
4 | 4 | import Link from '@docusaurus/Link'; |
@@ -53,35 +53,30 @@ function Feature({ title, description }) { |
53 | 53 | } |
54 | 54 |
|
55 | 55 | function Home() { |
56 | | - const mapUrl = "./demo/data/osmtile-cbmt.mapml" |
57 | | - const mapiframe = `<script type="module" src="dist/mapml.js"></script> |
58 | | - <style> |
59 | | - html, |
60 | | - body { |
61 | | - height: 100%; |
62 | | - } |
63 | | - body { |
64 | | - margin: 0; |
65 | | - } |
66 | | - mapml-viewer { |
67 | | - width: 100%; |
68 | | - height: inherit; |
69 | | - } |
70 | | - </style> |
71 | | - <mapml-viewer projection="CBMTILE" zoom="5" lat="58" lon="-90" frameborder="0" controls> |
72 | | - <map-layer label="CBMT" src="${mapUrl}" checked></map-layer> |
73 | | - </mapml-viewer>`; |
74 | | - const context = useDocusaurusContext(); |
75 | | - const { siteConfig = {} } = context; |
76 | | - const home = translate({"message":"Home","id":"mapml.HomePageContent.Home"}); |
77 | | - const description = translate({"message":"Documentation for mapml-viewer and layer element suite","id":"mapml.HomePageContent.Description"}); |
78 | | - return ( |
79 | | - <Layout |
80 | | - title={home} |
81 | | - description={description}> |
| 56 | + const { siteConfig = {}, i18n } = useDocusaurusContext(); |
| 57 | + const [mapiframe, setMapIframe] = useState(''); |
| 58 | + |
| 59 | + useEffect(() => { |
| 60 | + const lang = i18n.currentLocale === 'fr' ? 'fr' : 'en'; |
| 61 | + const mapUrl = lang === 'en' ? "./demo/data/osmtile-cbmt.mapml" : "./demo/data/osmtile-cbmt-fr.mapml"; |
| 62 | + setMapIframe(` |
| 63 | + <html lang="${lang}"> |
| 64 | + <script type="module" src="dist/mapml.js"></script> |
| 65 | + <style> |
| 66 | + html, body { height: 100%; margin: 0; } |
| 67 | + mapml-viewer { width: 100%; height: inherit; } |
| 68 | + </style> |
| 69 | + <mapml-viewer projection="CBMTILE" zoom="5" lat="58" lon="-90" frameborder="0" controls> |
| 70 | + <map-layer label="CBMT" src="${mapUrl}" checked></map-layer> |
| 71 | + </mapml-viewer> |
| 72 | + </html> |
| 73 | + `); |
| 74 | + }, [i18n.currentLocale]); |
82 | 75 |
|
| 76 | + return ( |
| 77 | + <Layout title="Home" description="Documentation for mapml-viewer and layer element suite"> |
83 | 78 | <header className={clsx('hero hero--primary', styles.heroBanner)}> |
84 | | - <iframe tabIndex="-1" height="500px" width="100%" frameBorder="0" scrolling="no" title="MapML-viewer" srcDoc={mapiframe}></iframe> |
| 79 | + <iframe tabIndex="-1" height="500px" width="100%" frameBorder="0" scrolling="no" title="MapML-viewer" srcDoc={mapiframe}></iframe> |
85 | 80 | <div className="container"> |
86 | 81 |
|
87 | 82 | <h1 className="hero__title"><Translate id="mapml.HomePageContent.Hero.title">{siteConfig.title}</Translate></h1> |
|
0 commit comments