When integrating our maps for an end-user application, be it for the web or for a mobile platform, developers often need to support several languages.

There are typically two sets of data to translate when preparing a multi-languages application:

1. Place content: names, categories
2. Navigation instructions: keywords, sentences used for guidance

Place content

Place content can be inserted in your application either by reading the localization data embedded in the map data using VisioMapEditor or by retrieving the client's data, hosted on the client's Content Management System (CMS)

1. Submitted in VisioMapEditor

When creating/editing the client's map, the VisioMapEditor user can submit place content for several languages. In the Settings -> Properties -> Edit Places dialog, by adding a new localization option (Edit button, top-right), it's possible to embed alternate versions of the place content for other languages and to set one of them as the default option.

Then if the application developer based their integration on one of our samples, then it probably reused our initialization process which automatically checks the navigator's preferred language and chooses the corresponding localized place content.

When using VisioWeb Essential, it's even more transparent, just make sure that the navigator's preferred language is properly sent to VisioWeb Essential with that line:

essential.setParameters({parameters: {locale: {language: navigator.language}}});

2. Retrieved from the client's (CMS)

In this particular case, it's up to the application developer to check the browser's language code and to retrieve the corresponding terms if there is an available match on the client's CMS.

var languageCode = navigator.language;

Or, the developer can leverage our VisioWeb API called getLanguageMatch to quickly check if the navigator's preferred language corresponds to one of the supported languages (the list of languages supported by the client's CMS).

Then it's only a matter of retrieving the matching place content and using our setPlaceName API to insert it on the map.

Navigation

The Navigation Translator

Out-of-the-box, VisioWeb solutions provide two sets of keywords:

1. english
2. french

These sets are used by the NavigationTranslator class to build sentences based on raw navigation data.

If you need to support other languages, you can retrieve the whole english set for instance using visioweb.NavigationTranslator#getLanguage, build a new set for the targeted language and submit it using visioweb.NavigationTranslator#addOrUpdateLanguage to make it available.

Example:

essential.createMapviewer().then(() => {    (...)    let newLanguage = JSON.parse(essential.navigation.translator.getLanguage('en'));    // TODO translate all keywords in newLanguage to create the new set    newLanguage.maneuvers.goStraight = 'Straight on !';    essential.navigation.translator.addOrUpdateLanguage('xx', JSON.stringify(newLanguage));    essential.navigation.setLanguageCode({languageCode: 'xx'});});

Don't forget to update the languageCode depending on the user's navigator preferences using VisioWeb Essential's Navigation#setLanguageCode.

‍