How to localize your maps in Mapbox GL JS

By: Lukas Martinelli

Localize your web map instantly using the new Mapbox GL language plugin for Mapbox GL JS. 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.

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet' />

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.9.0/mapbox-gl-language.js'></script>

<div id='map'></div>

<script>
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v10',
    center: [-77.0259, 38.9010],
    zoom: 9
});

var language = new MapboxLanguage();
map.addControl(language);
</script>

By default, the language plugin assigns the language configured in your browser to the map’s labels. Mapbox Streets currently supports 9 languages in 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!

Lukas Martinelli

How to localize your maps in Mapbox GL JS was originally published in Points of Interest on Medium, where people are continuing the conversation by highlighting and responding to this story.