Multi Language

The Mappedin Web SDK has the ability to support multiple languages. The particular languages supported will vary by venue. Each language must be enabled and text translated in the source map before a language can be used in the SDK.

MappedinVenue.languages will contain an array of supported languages that have been configured in Mappedin CMS for the venue. To get the currently displayed language, use Mappedin.currentLanguage.

Copy
const venue = await getVenue(options);
console.log(venue.venue.languages); // List available languages for venue
console.log(venue.currentLanguage); // Get the current language of venue

The language can be changed by calling Mappedin.changeLanguage() and passing in a language code.

Once a change language is complete, an event with GET_VENUE_EVENT.LANGUAGE_CHANGED is fired. At this point the map is ready to use the new language. Use this event to trigger things like re-creation of labels in the new language.

Copy
// Update labels when the language changes.
venue.on(GET_VENUE_EVENT.LANGUAGE_CHANGED, () => {
  mapView.FloatingLabels.removeAll();
  mapView.FloatingLabels.labelAllLocations();
  //Logs the current language.
  console.log(venue.currentLanguage);
});

The following CodeSandbox logs all supported languages to the console and changes the language between English and Spanish when the map is clicked. When the language is changed, all Floating Labels are removed and then re-added using the new language.

For the venue used in the example below, only the location name for Banana Republic is translated.