Skip to content

coocy/mapbox-gl-language

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mapbox GL Language

Adds support for switching the language of your map style in Mapbox GL JS maps.

This is an improved version of Mapbox GL Language, works with Mapbox GL JS v1.x and v2.x

Addition features

  • Works with Mapbox Streets v7 & v8 vector tile styles.
  • Works with OpenMapTiles' styles.
  • The map shows both point's name of current map language and the point's local language,
  • If the point's local language name is the same to current map language, then only show the point's local language name.
  • Changing the map's style won't reset the language.

Supported Styles

This plugin works with official Mapbox styles and OpenMapTiles' styles:

Mapbox Streets v8 Vector Tile 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-v11
  • mapbox://styles/mapbox/traffic-day-v4
  • mapbox://styles/mapbox/traffic-night-v4

Mapbox Streets v7 Vector Tile Styles

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

Check the demo: http://coocy.github.io/mapbox-gl-language/example/

Multiple language supported with style transforms

Usage

mapbox-gl-language is a Mapbox GL JS plugin that you can easily add on top of your map.

Example

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

var language = new MapboxLanguage();
map.addControl(language);

Check examples/ for usage example.

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. Default: ['ar', 'en', 'es', 'fr', 'de', 'ja', 'ko', 'pt', 'ru', 'vi', zh', 'zh-CN', 'zh-TW', 'zh-HK']
    • options.defaultLanguage string? Name of the default language to initialize style after loading. Default: auto match the browser language.
    • options.excludedLayerIds Array<string>? Name of the layers that should be excluded from translation.

setLanguage

Explicitly change the map's language.

Parameters

  • language string The language iso code

About

Switch language of your Mapbox GL JS style

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 61.9%
  • HTML 38.1%