Translate layers names in API layer switcher

camptocamp · Sep 4, 2019 · e578ead · e578ead
1 parent e48f6f8
commit e578ead
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/api/index.js b/api/index.js
@@ -4,6 +4,8 @@ import Map from './src/Map.js';
 config.themesUrl = 'https://geomapfish-demo-2-5.camptocamp.com/themes?' +
   'version=2&background=background&interface=api';
 
+config.localeUrl = 'https://geomapfish-demo-2-5.camptocamp.com/locale.json'
+
 const lib = {
   Map
 };

diff --git a/api/src/Themes.js b/api/src/Themes.js
@@ -27,6 +27,30 @@ function getThemesPromise() {
   return themesPromise;
 }
 
+/**
+ * @type {Promise<Object<string, string>>} Promise
+ * @hidden
+ */
+let localePromise;
+
+/**
+ * @hidden
+ * @return {Promise<Object<string, string>>} Promise
+ */
+function getLocalePromise() {
+  if (!constants.localeUrl) {
+    // Fallback to an empty dict
+    return Promise.resolve({});
+  }
+  if (!localePromise) {
+    localePromise = fetch(constants.localeUrl).then(response => response.json()).then(data =>
+      // Return the first property as data should looks like { 'fr': { ... } }
+      data[Object.keys(data)[0]]
+    );
+  }
+  return localePromise;
+}
+
 /**
  * @type {Promise<Map<string, overlayDefinition>>|undefined}
  * @hidden
@@ -77,8 +101,8 @@ export function getBackgroundLayers() {
           }
           throw new Error('Unknow layer type');
         });
-        const groupPromise = Promise.all(groupPromises);
-        promises.push(groupPromise.then(
+        const groupsPromise = Promise.all(groupPromises);
+        promises.push(groupsPromise.then(
           layers => {
             // create a layer group for the children.
             const group = new GroupLayer({
@@ -205,9 +229,11 @@ export function createWMSLayer(config, ogcServer) {
     minResolution: config.minResolutionHint,
     maxResolution: config.maxResolutionHint
   });
-  layer.set('title', config.name);
   layer.set('config.name', config.name);
-  return Promise.resolve(layer);
+  return getLocalePromise().then(translations => {
+    layer.set('title', translations[config.name] || config.name);
+    return layer;
+  });
 }
 
 /**
@@ -216,7 +242,9 @@ export function createWMSLayer(config, ogcServer) {
  * @hidden
  */
 export function createWMTSLayer(config) {
-  return getWMTSCapability(config.url).then((capability) => {
+  return Promise.all([getLocalePromise(), getWMTSCapability(config.url)]).then(result => {
+    const translations = result[0];
+    const capability = result[1];
     const options = optionsFromCapabilities(capability, {
       crossOrigin: 'anonymous',
       layer: config.layer,
@@ -231,7 +259,7 @@ export function createWMTSLayer(config) {
       preload: Infinity,
       source: source
     });
-    layer.set('title', config.name);
+    layer.set('title', translations[config.name] || config.name);
     layer.set('config.name', config.name);
     return layer;
   });