Mapbox GL Language

Switch the language of your style in Mapbox GL JS.

Usage

mapbox-gl-language is a Mapbox GL JS plugin that you can easily add on top of your map. Check index.html for a complete example.

Make sure to include the JS files.

When using NPM

Check how to use Mapbox GL JS in a module bundler.

npm install --save mapbox-gl @mapbox/mapbox-gl-browser-language

const mapboxgl = require('mapbox-gl')
const MapboxBrowserLanguage = require('@mapbox/mapbox-gl-language');
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/traffic-night-v2',
    center: [-77.0259, 38.9010],
    zoom: 9
});
map.addControl(new MapboxBrowserLanguage());

API

MapboxLanguage

Create a new Mapbox GL JS plugin that modifies the layers of the map style to use the 'text-field' that matches the browser language.

Parameters

• options object Options to configure the plugin.
  • options.supportedLanguages Array<string>? List of supported languages
  • options.languageTransform Function? Custom style transformation to apply
  • options.languageField RegExp? RegExp to match if a text-field is a language field (optional, default /^\{name/)
  • options.getLanguageField Function? Given a language choose the field in the vector tiles
  • options.languageSource string? Name of the source that contains the different languages

setLanguage

Explicitly change the language for a style.

Parameters

• style object Mapbox GL style to modify
• language string The language iso code

Develop

Run the linter and watch for changes to rebuild with browserify.

npm install
npm run test
npm run watch

Create a minified standalone build.

npm install
npm run build

Languages

Showcasing the languages supported by Mapbox Streets.

• English
• Arabic
• French
• Portuguese
• German
• Spanish
• Russian
• Chinese

Supported Styles

You can configure the plugin to support your own very custom style using style transforms and custom language fields. By default this plugin works best with official Mapbox styles (or styles derived from official Mapbox styles):

• mapbox://mapbox-streets-v9
• mapbox://mapbox-outdoors-v9
• mapbox://mapbox-dark-v9
• mapbox://mapbox-light-v9
• mapbox://mapbox-satellite-streets-v9
• mapbox://mapbox-traffic-day-v9
• mapbox://mapbox-traffic-night-v9