Localize home page map

Maps4HTML · Nov 4, 2024 · 4e6e7af · 4e6e7af
1 parent 5040525
commit 4e6e7af
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 28 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
@@ -53,35 +53,30 @@ function Feature({ title, description }) {
 }
 
 function Home() {
-  const mapUrl = "./demo/data/osmtile-cbmt.mapml"
-  const mapiframe = `<script type="module" src="dist/mapml.js"></script>
-  <style>
-  html,
-  body {
-    height: 100%;
-  }
-  body {
-    margin: 0;
-  }
-  mapml-viewer {
-    width: 100%;
-    height: inherit;
-  }
-  </style>
-  <mapml-viewer projection="CBMTILE" zoom="5" lat="58" lon="-90" frameborder="0" controls>
-    <map-layer label="CBMT" src="${mapUrl}" checked></map-layer>
-  </mapml-viewer>`;
-  const context = useDocusaurusContext();
-  const { siteConfig = {} } = context;
-  const home = translate({"message":"Home","id":"mapml.HomePageContent.Home"});
-  const description = translate({"message":"Documentation for mapml-viewer and layer element suite","id":"mapml.HomePageContent.Description"});
-  return (
-    <Layout
-      title={home}
-      description={description}>
+  const { siteConfig = {}, i18n } = useDocusaurusContext();
+  const [mapiframe, setMapIframe] = useState('');
+
+  useEffect(() => {
+    const lang = i18n.currentLocale === 'fr' ? 'fr' : 'en';
+    const mapUrl = lang === 'en' ? "./demo/data/osmtile-cbmt.mapml" : "./demo/data/osmtile-cbmt-fr.mapml";
+    setMapIframe(`
+      <html lang="${lang}">
+        <script type="module" src="dist/mapml.js"></script>
+        <style>
+          html, body { height: 100%; margin: 0; }
+          mapml-viewer { width: 100%; height: inherit; }
+        </style>
+        <mapml-viewer projection="CBMTILE" zoom="5" lat="58" lon="-90" frameborder="0" controls>
+          <map-layer label="CBMT" src="${mapUrl}" checked></map-layer>
+        </mapml-viewer>
+      </html>
+    `);
+  }, [i18n.currentLocale]);
 
+  return (
+    <Layout title="Home" description="Documentation for mapml-viewer and layer element suite">
       <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <iframe tabIndex="-1" height="500px" width="100%" frameBorder="0" scrolling="no" title="MapML-viewer" srcDoc={mapiframe}></iframe>
+        <iframe tabIndex="-1" height="500px" width="100%" frameBorder="0" scrolling="no" title="MapML-viewer" srcDoc={mapiframe}></iframe>
         <div className="container">
 
     <h1 className="hero__title"><Translate id="mapml.HomePageContent.Hero.title">{siteConfig.title}</Translate></h1>

diff --git a/static/demo/data/osmtile-cbmt-fr.mapml b/static/demo/data/osmtile-cbmt-fr.mapml
@@ -0,0 +1,15 @@
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
+  <map-head>
+    <map-title>La carte de base du Canada - transport</map-title>
+    <map-link rel="license" href="https://ressources-naturelles.canada.ca/science-et-donnees/science-et-recherche/geomatique/outils-et-donnees-topographiques/licence/17300" title="La Carte de Base du Canada © Ressources naturelles Canada"></map-link>
+  </map-head>
+  <map-body>
+    <map-extent units="OSMTILE" checked="checked" hidden="hidden">
+      <map-input name="z" type="zoom" value="15" min="0" max="15"></map-input>
+      <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="32768"></map-input>
+      <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="32768"></map-input>
+      <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT_CBCT_GEOM_3857/MapServer/tile/{z}/{y}/{x}?m4h=t"></map-link>
+      <map-link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBCT_TXT_3857/MapServer/tile/{z}/{y}/{x}?m4h=t"></map-link>
+    </map-extent>
+  </map-body>
+</mapml->