i18n

ℹ️ Requiere v5.1.0+ de Mapea ℹ️

Mapea da soporte a la internacionalización (i18n) a través de la clase M.language, permitiendo definir conjuntos de palabras que contengan los textos a mostrar al usuario en función del lenguaje activo, en caso de que queramos que los componentes de la interfaz que vamos a programar estén preparados para ello.

Los lenguajes predefinidos en el core de Mapea son "es" para los textos en español, activo por defecto, y "en" para los textos en inglés.

⚠️ Solo algunos componentes de Mapea tienen traducciones al inglés, ya que como se verá a continuación, el componente que contiene el texto debe estar preparado para ello.

Un lenguaje no es más que un Objeto javascript donde se organizan los textos. Por ejemplo:

// Creo el lenguaje Francés, con el método .addTranslation,
// inicialmente vacío de palabras
M.language.addTranslation('fr',{});

// Añadimos el equivalente a 'Información' para los dialogos en francés
let frances = M.language.getTranslation('fr');
frances.dialog = {'info' : 'L\'information'};

// Ahora ya puedo obtener el texto "Información" en cualquiera de los tres idiomas  
console.log(M.language.getValue('dialog','es').info); // Información
console.log(M.language.getValue('dialog','en').info); // Information
console.log(M.language.getValue('dialog','fr').info); // L'information

La clave está en que podemos establecer un Lenguaje por defecto, de modo que los textos de los componentes (plugins, controles y mapa, etc.) no necesitan conocer ni explicitar qué lenguaje está activo:

M.language.setLang("fr");
console.log(M.language.getValue('dialog').info); // L'information

M.language.setLang("es");
console.log(M.language.getValue('dialog').info); // Información

A efectos de aplicarlo en los componentes de Mapea, ya sean controles o plugins, puede hacerse desde el método que se encarga de compilar la plantilla o template asociada, en la fachada del control/plugin, ya que es ahí donde se le pueden pasar como variables los textos de la interfaz:

// facade/plugin.js
...
createView(map) {
    return compileTemplate(scaleTemplate, {
      vars: {
        title: M.language.getValue('scale').title,
        scale: M.language.getValue('scale').scale,
      },
    });
  }  

<!-- templates/plugin.html -->
<div class="m-control m-scale-container" title="{{title}}">
    <div class="m-unit g-cartografia-escala3">{{scale}} = 1 : </div>
    <div class="m-scale" id="m-scale-span"></div>
</div>