Merge pull request #19 from cartologic/terria-localization

Terria localization

README.md

@@ -76,6 +76,10 @@ module.exports = function(devMode, hot) {
 
 3. Move **wwwroot/index.html** to `templates` directory, rename it **terria.html**, and update any static file import.
 
+## TerriaMap Localization
+
+If you want to add a translation for a particular language, you may follow [this guide](static/TerriaMap/README.md#localization) of how to add a new language to Terria map.
+
 ## Limitations
 
 TerriaJS comes with a Node.js-based web server, called [terria-server](https://github.com/TerriaJS/terriajs-server) that offers many useful features like serving static files and a proxy service that allows TerriaJS to access geospatial data servers that don't support CORS.

static/TerriaMap/README.md

@@ -10,3 +10,34 @@ This is a complete website built using the TerriaJS library. See the [TerriaJS R
 
 
 For instructions on how to deploy your map, see [the documentation here](doc/deploying/deploying-to-aws.md).
+
+## Localization
+
+TerriaJS supports localization using [i18next framework](https://www.i18next.com/) with two available languages by default, English and Arabic. But any **Left-to-Right (LTR)** or **Right-to-Left (RTL)** language can be added.
+
+If you want to add another language, you may follow the following steps:
+
+1. Select the language you want to use from the language selector in Cartoview.
+2. Check the list of popular [languages with their codes](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) to find the code of the language that you selected in step 1.
+3. Prepare the translation file that contains the objects that should be translated. For instance, you can find [English file](https://github.com/cartologic/cartoview_terriaJs/blob/master/static/TerriaMap/lib/Language/en/translation.json) for English in the directory `lib/Language`. So, create a folder with the name of the language then inside it, create the translation file as JSON and add the appropriate translations according to the language.
+4. After creating the translation file, import it inside the [i18n.js](https://github.com/cartologic/cartoview_terriaJs/blob/master/static/TerriaMap/lib/Models/i18n.js) file located at `lib/Models`. Then, add it to the `resources` object like that:
+```
+import translationEN from "../Language/en/translation.json";
+import translationAR from "../Language/ar/translation.json";
+const resources = {
+  en: {
+    translation: translationEN
+  },
+  ar: {
+    translation: translationAR
+  }
+};
+```
+5. Rebuild the app after the previous changes with:
+
+```bash
+npm run gulp
+```
+
+Now, if you start up the app, you should see the language is added successfully and can be selected easily.
+

static/TerriaMap/lib/Language/en/translation.json

@@ -129,6 +129,9 @@
     "panelLabel": "Available Maps",
     "panelDescription": "Clicking on a map below will open it in a separate window or tab."
   },
+  "about": {
+    "caption": "About"
+  },
   "feedback": {
     "feedbackPreamble": "We would love to hear from you!",
     "title": "Feedback",

static/TerriaMap/lib/Models/i18n.js

@@ -2,13 +2,17 @@ import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import {initReactI18next} from "react-i18next";
 import translationEN from "../Language/en/translation.json";
+import translationAR from "../Language/ar/translation.json";
 
 const fallbackLng = "en";
 
 // the translations
 const resources = {
     en: {
         translation: translationEN
+    },
+    ar: {
+        translation: translationAR
     }
 };
 

static/TerriaMap/lib/Views/AboutButton.jsx

@@ -1,7 +1,15 @@
 import React from "react";
-
+import { withTranslation } from "react-i18next";
 import MenuButton from "terriajs/lib/ReactViews/Map/MenuButton";
 
-export default function AboutButton() {
-  return <MenuButton caption="About" href="https://nationalmap.gov.au/about.html" />;
-}
+const AboutButton = () => {
+    const { t } = this.props;
+    return (
+        <MenuButton
+            caption={t("about.caption")}
+            href="https://nationalmap.gov.au/about.html"
+        />
+    );
+};
+
+export default withTranslation()(AboutButton);

static/TerriaMap/lib/Views/UserInterface.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import "inobounce";
 import { withTranslation } from "react-i18next";
-
+import i18next from "i18next";
 import Branding from "./CustomComponents/Branding/Branding";
 import arrayContains from "terriajs/lib/Core/arrayContains";
 import DragDropFile from "terriajs/lib/ReactViews/DragDropFile.jsx";
@@ -115,6 +115,11 @@ const StandardUserInterface = createReactClass({
   componentDidMount() {
     this._wrapper.addEventListener("dragover", this.dragOverListener, false);
     showStoryPrompt(this.props.viewState, this.props.terria);
+
+    // eslint-disable-next-line jsx-control-statements/jsx-jcs-no-undef
+    const { currentLanguage } = globalURLs;
+    i18next.changeLanguage(currentLanguage);
+    document.body.dir = i18next.dir();
   },
   componentWillUnmount() {
     window.removeEventListener("resize", this.resizeListener, false);