Mapbox GL Language
![npm](https://img.shields.io/npm/v/@mapbox/mapbox-gl-language.svg)
Adds support for switching the language of your map style in Mapbox GL JS maps.
Requires mapbox-gl-js. For other platforms, such as Android and iOS, see this help document.
![Multiple language supported with style transforms](https://cloud.githubusercontent.com/assets/1288339/26266912/89b1b6ba-3cb5-11e7-9964-49f51290d627.gif)
Automatic style transformations for different languages
![Switch language based on user agent](https://cloud.githubusercontent.com/assets/1288339/26269878/742cdb02-3cc5-11e7-8479-c6ab3f0f8a82.gif)
Switch language based on user agent
Usage
mapbox-gl-language is a Mapbox GL JS plugin that you can easily add on top of your map.
When using a CDN
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
When using modules
Check how to use Mapbox GL JS in a module bundler.
npm install --save mapbox-gl @mapbox/mapbox-gl-language
import mapboxgl from 'mapbox-gl';
import MapboxLanguage from '@mapbox/mapbox-gl-language';
Example
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: [-77.0259, 38.9010],
zoom: 9
});
const language = new MapboxLanguage();
map.addControl(language);
Check examples/
for more usage examples.
API
Table of Contents
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.
As of Mapbox GL Language v1.0.0, this plugin no longer supports token values (e.g. {name}
). v1.0+ expects the text-field
property of a style to use an expression of the form ['get', 'name_en']
or ['get', 'name']
; these expressions can be nested. Note that get
expressions used as inputs to other expressions may not be handled by this plugin. For example:
["match",
["get", "name"],
"California",
"Golden State",
["coalesce",
["get", "name_en"],
["get", "name"]
]
]
Only styles based on Mapbox v8 styles are supported.
Parameters
setLanguage
Explicitly change the language for a style.
Parameters
style
object Mapbox GL style to modifylanguage
string The language iso code
Returns object the modified style
Develop
Run the linter and watch for changes to rebuild with browserify.
npm install
npm run test
Languages
Showcasing the languages supported by Mapbox Streets.
Supported Styles
You can configure the plugin to support your own 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.
The styles must be based on Mapbox v8 styles:
mapbox://styles/mapbox/streets-v11
mapbox://styles/mapbox/outdoors-v11
mapbox://styles/mapbox/dark-v10
mapbox://styles/mapbox/light-v10
mapbox://styles/mapbox/satellite-streets-v9
mapbox://styles/mapbox/traffic-day-v2
mapbox://styles/mapbox/traffic-night-v2