feat: mapping interface locale (#412)

* Use GIS API

* Refactor map locale strings

* Text change

* Code clean

* Add locale string

* Map locale refactor

* Generate translation strings

* Code fix

* Map locales in separate file

.prettierrc

@@ -2,4 +2,4 @@
     "singleQuote": true,
     "tabWidth": 4,
     "trailingComma": "es5"
-}
+}

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2019-10-25T12:59:42.306Z\n"
-"PO-Revision-Date: 2019-10-25T12:59:42.306Z\n"
+"POT-Creation-Date: 2020-01-27T16:03:18.570Z\n"
+"PO-Revision-Date: 2020-01-27T16:03:18.570Z\n"
 
 msgid "Maps"
 msgstr ""
@@ -484,6 +484,63 @@ msgstr ""
 msgid "Latitude"
 msgstr ""
 
+msgid "acres"
+msgstr ""
+
+msgid "Area"
+msgstr ""
+
+msgid "Center map on area"
+msgstr ""
+
+msgid "Center map on line"
+msgstr ""
+
+msgid "Click the next position"
+msgstr ""
+
+msgid "Click where you want to start the measurement"
+msgstr ""
+
+msgid "Distance"
+msgstr ""
+
+msgid "Enter fullscreen"
+msgstr ""
+
+msgid "Exit fullscreen"
+msgstr ""
+
+msgid "ha"
+msgstr ""
+
+msgid "km"
+msgstr ""
+
+msgid "Measure distances and areas"
+msgstr ""
+
+msgid "mi"
+msgstr ""
+
+msgid "Perimeter"
+msgstr ""
+
+msgid "Reset bearing to north"
+msgstr ""
+
+msgid "Search for place or address"
+msgstr ""
+
+msgid "Zoom in"
+msgstr ""
+
+msgid "Zoom out"
+msgstr ""
+
+msgid "Zoom to content"
+msgstr ""
+
 msgid "Viewing interpretation from {{interpretationDate}}"
 msgstr ""
 

src/components/map/MapApi.js

@@ -1,12 +1,18 @@
 import MapApi, { layerTypes, controlTypes } from '@dhis2/gis-api';
 // import MapApi, { layerTypes, controlTypes } from '@dhis2/maps-gl';
+import getMapLocale from './mapLocale';
 
 // Returns a new map instance
 const map = options => {
     const div = document.createElement('div');
+
     div.style.width = '100%';
     div.style.height = '100%';
-    return new MapApi(div, options);
+
+    return new MapApi(div, {
+        ...options,
+        locale: getMapLocale(),
+    });
 };
 
 export { layerTypes, controlTypes };

src/components/map/mapLocale.js

@@ -0,0 +1,29 @@
+import i18n from '@dhis2/d2-i18n';
+
+const getMapLocale = () => ({
+    acres: i18n.t('acres'),
+    Area: i18n.t('Area'),
+    Cancel: i18n.t('Cancel'),
+    'Center map on area': i18n.t('Center map on area'),
+    'Center map on line': i18n.t('Center map on line'),
+    'Click the next position': i18n.t('Click the next position'),
+    'Click where you want to start the measurement': i18n.t(
+        'Click where you want to start the measurement'
+    ),
+    Delete: i18n.t('Delete'),
+    Distance: i18n.t('Distance'),
+    'Enter fullscreen': i18n.t('Enter fullscreen'),
+    'Exit fullscreen': i18n.t('Exit fullscreen'),
+    ha: i18n.t('ha'),
+    km: i18n.t('km'),
+    'Measure distances and areas': i18n.t('Measure distances and areas'),
+    mi: i18n.t('mi'),
+    Perimeter: i18n.t('Perimeter'),
+    'Reset bearing to north': i18n.t('Reset bearing to north'),
+    'Search for place or address': i18n.t('Search for place or address'),
+    'Zoom in': i18n.t('Zoom in'),
+    'Zoom out': i18n.t('Zoom out'),
+    'Zoom to content': i18n.t('Zoom to content'),
+});
+
+export default getMapLocale;