Language localization for maps

Aug 04, 2017


We have a new language plugin for that lets you localize the language of the map to match the default language configured in your browser to the map’s labels. So if your browser is set to English, you see English, if your browser is set to Spanish, the map is in Spanish—all automatically. Just drop in the plugin and switch the labels to the language that best suits your users needs.

Localize Map

 

You can localize your web map in three steps:

  1. Start off with the “Display a map” example.
  2. Reference the language plugin using the CDN or a module bundler.
  3. Initialize the MapboxLanguageplugin and add it to your Mapobject.
 

By default, the language plugin assigns the language configured in your browser to the map’s labels. Mapbox Streets currently supports 9 languagesin addition to the regional local language.

You can also explicitly set the language you want and transform your map’s labels instantly:

map.addControl(new MapboxBrowserLanguage({  defaultLanguage: 'fr'}));

Remember to enable right to left text support in Mapbox GL JS to render Arabic script correctly.

// Add right to left text support to support Arabic labels
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');

Open source

Mapbox GL Language is an open source project. Try using the plugin then dig into the code, and contribute!