[backport 2.4] Translate layers names in API layer switcher

Makefile

@@ -170,6 +170,10 @@ serve-gmf: .build/node_modules.timestamp $(ANGULAR_LOCALES_FILES)
 serve-gmf-apps: .build/node_modules.timestamp $(ANGULAR_LOCALES_FILES)
 	npm run serve-gmf-apps
 
+.PHONY: serve-api
+serve-api:
+	npm run serve-api
+
 .PHONY: examples-hosted
 examples-hosted: \
 		examples-hosted-ngeo \

README.md

@@ -68,6 +68,17 @@ then visit them using
 https://localhost:3000/contribs/gmf/apps/<app_name>.html, for example:
 https://localhost:3000/contribs/gmf/apps/desktop.html
 
+
+### Run the Simple API Help
+
+To run the Simple API Help:
+
+```
+make serve-api
+```
+
+Then visit https://localhost:3000/apihelp.html
+
 ### Go further
 
 * [Developer guide](docs/developer-guide.md) – This guide is for ngeo developers.

api/index.js

@@ -4,6 +4,8 @@ import Map from './src/Map.js';
 config.themesUrl = 'https://geomapfish-demo-2-4.camptocamp.com/themes?' +
   'version=2&background=background&interface=api';
 
+config.localeUrl = 'https://geomapfish-demo-2-4.camptocamp.com/locale.json';
+
 const lib = {
   Map
 };

api/src/Themes.js

@@ -24,6 +24,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
@@ -196,9 +220,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;
+  });
 }
 
 /**
@@ -207,7 +233,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,
@@ -219,7 +247,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;
   });

api/src/constants.js

@@ -3,6 +3,8 @@ import EPSG21781 from '@geoblocks/proj/src/EPSG_21781.js';
 
 export default {
   themesUrl: undefined,
+  localeUrl: undefined,
+
   projection: EPSG21781,
   resolutions: [250, 100, 50, 20, 10, 5, 2, 1, 0.5, 0.25, 0.1, 0.05],
   extent: undefined,