diff --git a/packages/earth-map/.env.sample b/packages/earth-map/.env.sample
index 34f71734..74c434c5 100644
--- a/packages/earth-map/.env.sample
+++ b/packages/earth-map/.env.sample
@@ -14,6 +14,7 @@ REACT_APP_AUTH0_AUDIENCE='' # required
REACT_APP_AUTH0_NAMESPACE='https://marapp.org' # required
REACT_APP_GTM_TAG='' # optional
+REACT_APP_WEGLOT_API_KEY='' # optional
REACT_APP_ENABLE_PUBLIC_ACCESS='false' # optional
REACT_APP_EXTERNAL_IDP_URL='' # optional
diff --git a/packages/earth-map/README.md b/packages/earth-map/README.md
index dc265e06..a41feeef 100755
--- a/packages/earth-map/README.md
+++ b/packages/earth-map/README.md
@@ -38,6 +38,7 @@ The following environment variables are required by the application.
| `REACT_APP_GTM_TAG` | Google Tag Manager ID |
| `REACT_APP_ENABLE_PUBLIC_ACCESS` | Enable unauthenticated access |
| `REACT_APP_EXTERNAL_IDP_URL` | External Identity Provider URL |
+| `REACT_APP_WEGLOT_API_KEY` | https://weglot.com/ - Weglot API Key |
## Getting started
diff --git a/packages/earth-map/public/index.html b/packages/earth-map/public/index.html
index cfe786aa..e59c0a94 100755
--- a/packages/earth-map/public/index.html
+++ b/packages/earth-map/public/index.html
@@ -29,6 +29,9 @@
-->
%REACT_APP_NAME%
+ <% if (process.env.REACT_APP_WEGLOT_API_KEY) { %>
+
+ <% } %>
diff --git a/packages/earth-map/src/components/map/legend/legend-info/component.tsx b/packages/earth-map/src/components/map/legend/legend-info/component.tsx
index 5ba3570b..dea58956 100644
--- a/packages/earth-map/src/components/map/legend/legend-info/component.tsx
+++ b/packages/earth-map/src/components/map/legend/legend-info/component.tsx
@@ -33,7 +33,7 @@ class LegendInfoComponent extends React.Component {
return (
{title}
-
+
);
}
diff --git a/packages/earth-map/src/components/widget/component.tsx b/packages/earth-map/src/components/widget/component.tsx
index d960d626..3c3f6f5c 100644
--- a/packages/earth-map/src/components/widget/component.tsx
+++ b/packages/earth-map/src/components/widget/component.tsx
@@ -282,7 +282,7 @@ class Widget extends React.PureComponent {
{/* CONTENT || INFO */}
-
+
{children({
...this.props,
...data,
@@ -311,7 +311,9 @@ class Widget extends React.PureComponent {
onRequestClose={() => this.setState({ activeInfo: !activeInfo })}
>
{name}
- {widgetDescription && }
+ {widgetDescription && (
+
+ )}
);
diff --git a/packages/earth-map/src/config/index.tsx b/packages/earth-map/src/config/index.tsx
index 7ce017b2..c9c092cc 100644
--- a/packages/earth-map/src/config/index.tsx
+++ b/packages/earth-map/src/config/index.tsx
@@ -28,6 +28,7 @@ export const FULLPAGE_LICENSE = process.env.REACT_APP_FULLPAGE_LICENSE;
export const ADMIN_URL = process.env.REACT_APP_ADMIN_URL;
export const APP_NAME = process.env.REACT_APP_NAME;
export const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN;
+export const WEGLOT_API_KEY = process.env.REACT_APP_WEGLOT_API_KEY;
export const GTM_TAG = process.env.REACT_APP_GTM_TAG;
export const ENABLE_PUBLIC_ACCESS = yn(process.env.REACT_APP_ENABLE_PUBLIC_ACCESS, {
diff --git a/packages/earth-map/src/locales/index.ts b/packages/earth-map/src/locales/index.ts
index 476a9fc8..9893fbbc 100644
--- a/packages/earth-map/src/locales/index.ts
+++ b/packages/earth-map/src/locales/index.ts
@@ -26,8 +26,15 @@ import translationEN from './en/translation.json';
import translationES from './es/translation.json';
import translationFR from './fr/translation.json';
+import * as weglot from './weglot';
+
const lang = SessionStorage.get('lang') || Elang.EN;
+i18n.on('initialized', async (options) => {
+ await weglot.init();
+ weglot.changeLanguage(options.lng);
+});
+
i18n.use(initReactI18next).init({
resources: {
[Elang.EN]: {
@@ -48,4 +55,8 @@ i18n.use(initReactI18next).init({
keySeparator: false,
});
-i18n.on('languageChanged', (lng) => SessionStorage.add('lang', lng));
+i18n.on('languageChanged', (lng) => {
+ weglot.changeLanguage(lng);
+
+ SessionStorage.add('lang', lng);
+});
diff --git a/packages/earth-map/src/locales/weglot.ts b/packages/earth-map/src/locales/weglot.ts
new file mode 100644
index 00000000..26a4dd26
--- /dev/null
+++ b/packages/earth-map/src/locales/weglot.ts
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2018-2020 National Geographic Society
+ *
+ * Use of this software does not constitute endorsement by National Geographic
+ * Society (NGS). The NGS name and NGS logo may not be used for any purpose without
+ * written permission from NGS.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+ * this file except in compliance with the License. You may obtain a copy of the
+ * License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed
+ * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ * CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { WEGLOT_API_KEY } from '../config';
+
+const Weglot = window['Weglot'];
+
+export function init(): Promise {
+ if (!Weglot) {
+ return;
+ }
+
+ const resolver = new Promise((resolve) => Weglot.on('initialized', resolve));
+
+ Weglot.initialize({
+ api_key: WEGLOT_API_KEY,
+ dynamic: '.translate-content',
+ exceptions: '.translate-content-ignore',
+ hide_switcher: true,
+ cache: true,
+ });
+
+ return resolver;
+}
+
+export function getAvailableLanguages(): string[] {
+ if (!Weglot) {
+ return [];
+ }
+
+ return [
+ Weglot.options.language_from,
+ ...Weglot.options.languages.map((lang) => lang.language_to),
+ ];
+}
+
+export function changeLanguage(lang: string): void {
+ if (!Weglot) {
+ return;
+ }
+
+ const availableLanguages = getAvailableLanguages();
+
+ if (availableLanguages.includes(lang)) {
+ Weglot.switchTo(lang);
+ } else {
+ const fallbackLang = Weglot.options.language_from;
+ Weglot.switchTo(fallbackLang);
+
+ console.error(`Language ${lang} is not available. Fallback to ${fallbackLang}`);
+ }
+}