2.6. Internacionalización

API-CORE 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.

• M.language.getTranslation([nombre_idioma]): Retorna un JSON con todas las traducciones.
• M.plugin.[nombre_plugin].getJSONTranslations([nombre_idioma]): Retorna un JSON con las traducciones de un plugin.
• M.language.addTranslation([nombre_idioma]): Permite establecer un idioma concretro al mapa, se tiene que declarar antes que M.map.
• M.language.getLang(): Devuelve el idioma actual.
• M.language.setLang(): Modifica el idioma.

// Ejemplo ampliando idiomas, en este caso añadiendo el Catalán:
M.language.addTranslation('ca', {
    "scale": {
        "title": "Escala",
        "scale": "Escala",
        "level": "Nivel"
    },
    "attributions": {
        "exception": {
            "impl": "La implementació no pot crear controls de Attribution.",
            "mode": "L'opció 'mode' no s'ha establert correctament. Consell: {mode: 1 | 2 | 3}.",
            "type": "L'opció 'type' no ha estat establerta. Quan l'opció 'url' és usada el plugin necessita l'opció 'type'. Valors = geojson | kml | topojson.",
            "layer_name": "L'opció 'layerName' no s'ha establert. Quan l'opció 'url' s'utilitza el connector necessita l'opció 'layerName'."
        },
        "attribution": "atribució",
        "tooltip": "Reconeixements"
    }
});

M.language.setLang('ca');

const mapa = new M.map({
    container: 'map',
    bbox: [-1715858.410945638, 4318997.846225591, 632287.0979749766, 4797187.895177655],
    controls: ['scale*true'],
});

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

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");
M.language.getLang(); //'fr'
console.log(M.language.getValue('dialog').info); // L'information

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

A efectos de aplicarlo en los componentes, 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>