Switch the language of your style in Mapbox GL JS.
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 a CDN
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.9.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-browser-language
var mapboxgl = require('mapbox-gl')
var MapboxLanguage = require('@mapbox/mapbox-gl-language');
Example
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
});
// Add RTL support if you want to support Arabic
// mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
var language = new MapboxLanguage();
map.addControl(language);
Check examples/
for more usage examples.
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 languagesoptions.languageTransform
Function? Custom style transformation to applyoptions.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 tilesoptions.languageSource
string? Name of the source that contains the different languages.options.defaultLanguage
string? Name of the default language to initialize style after loading.
Explicitly change the language for a style.
Parameters
Returns object the modified style
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
Showcasing the languages supported by Mapbox Streets.
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-v10
mapbox://mapbox-outdoors-v10
mapbox://mapbox-dark-v9
mapbox://mapbox-light-v9
mapbox://mapbox-satellite-streets-v9
mapbox://mapbox-traffic-day-v2
mapbox://mapbox-traffic-night-v2