diff --git a/.travis.yml b/.travis.yml index 479ad90..9380091 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,5 @@ language: node_js node_js: -- "6" +- "14" script: - npm test diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..f03cd5a --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,31 @@ +## 1.0.0 + +### ⚠️ Breaking changes + +- Adds support for Mapbox Streets v8 vector tileset and all styles based on this tileset, such as `streets-v11` and `dark-v10` while removing support for Mapbox Streets v7 vector tileset-based styles. ([#39](https://github.com/mapbox/mapbox-gl-language/pull/39)) +- Removes support for Internet Explorer 11. ([#39](https://github.com/mapbox/mapbox-gl-language/pull/39)) +- Support for Streets v7 Chinese `zh` is replaced with Traditional Chinese `zh-Hant` and Simplified Chinese `zh-Hans`. ([#39](https://github.com/mapbox/mapbox-gl-language/pull/39)) +- Support for token values (e.g. `{name}`) has been removed. The plugin now expects the `text-field` property of a style to use an [expression](https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/) 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"] + ] +] +``` +([#39](https://github.com/mapbox/mapbox-gl-language/pull/39)) + +### Features and improvements + +- Add support for Mapbox GL JS v2.0.0+. ([#42](https://github.com/mapbox/mapbox-gl-language/pull/42)) +- Add support for Vietnamese `vi`. ([#43](https://github.com/mapbox/mapbox-gl-language/pull/43)) + +### Bug fixes + +- Remove unnecessary letter spacing transformations for Arabic. ([#44](https://github.com/mapbox/mapbox-gl-language/pull/44)) +- Prevent potential `undefined` errors when language input is `null`. ([#45](https://github.com/mapbox/mapbox-gl-language/pull/45)) +- Ensure that the selected language is retained when switching map styles. ([#46](https://github.com/mapbox/mapbox-gl-language/pull/46)) \ No newline at end of file diff --git a/README.md b/README.md index 860abe9..32e8721 100644 --- a/README.md +++ b/README.md @@ -6,11 +6,11 @@ Adds support for switching the language of your map style in [Mapbox GL JS](http ![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_ +*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_ +*Switch language based on user agent* ## Usage @@ -18,7 +18,7 @@ _Switch language based on user agent_ **When using a CDN** - + **When using modules** @@ -29,15 +29,15 @@ npm install --save mapbox-gl @mapbox/mapbox-gl-language ``` ```javascript -var mapboxgl = require('mapbox-gl') -var MapboxLanguage = require('@mapbox/mapbox-gl-language'); +import mapboxgl from 'mapbox-gl'; +import MapboxLanguage from '@mapbox/mapbox-gl-language'; ``` **Example** ```javascript mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN'; -var map = new mapboxgl.Map({ +const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v10', center: [-77.0259, 38.9010], @@ -47,7 +47,7 @@ var map = new mapboxgl.Map({ // Add RTL support if you want to support Arabic // mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.10.1/mapbox-gl-rtl-text.js'); -var language = new MapboxLanguage(); +const language = new MapboxLanguage(); map.addControl(language); ``` @@ -59,41 +59,41 @@ Check `examples/` for more usage examples. #### Table of Contents -- [MapboxLanguage](#mapboxlanguage) - - [Parameters](#parameters) - - [setLanguage](#setlanguage) - - [Parameters](#parameters-1) +* [MapboxLanguage](#mapboxlanguage) + * [Parameters](#parameters) + * [setLanguage](#setlanguage) + * [Parameters](#parameters-1) ### MapboxLanguage Create a new [Mapbox GL JS plugin](https://www.mapbox.com/blog/build-mapbox-gl-js-plugins/) 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](https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/) 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"] - ] -] -``` + + ["match", + ["get", "name"], + "California", + "Golden State", + ["coalesce", + ["get", "name_en"], + ["get", "name"] + ] + ] + Only styles based on [Mapbox v8 styles](https://docs.mapbox.com/help/troubleshooting/streets-v8-migration-guide/) are supported. #### Parameters -- `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Options to configure the plugin. - - `options.supportedLanguages` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>?** List of supported languages - - `options.languageTransform` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** Custom style transformation to apply - - `options.languageField` **[RegExp](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** RegExp to match if a text-field is a language field (optional, default `/^name_/`). Note that as of Mapbox GL Language v1.0.0, token values (e.g. `{name}`) are no longer supported. - - `options.getLanguageField` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** Given a language choose the field in the vector tiles - - `options.languageSource` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Name of the source that contains the different languages. - - `options.defaultLanguage` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Name of the default language to initialize style after loading. - - `options.excludedLayerIds` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>?** Name of the layers that should be excluded from translation. +* `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Options to configure the plugin. + + * `options.supportedLanguages` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>?** List of supported languages + * `options.languageTransform` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** Custom style transformation to apply + * `options.languageField` **[RegExp](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** RegExp to match if a text-field is a language field (optional, default `/^name_/`) + * `options.getLanguageField` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** Given a language choose the field in the vector tiles + * `options.languageSource` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Name of the source that contains the different languages. + * `options.defaultLanguage` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Name of the default language to initialize style after loading. + * `options.excludedLayerIds` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>?** Name of the layers that should be excluded from translation. #### setLanguage @@ -101,11 +101,12 @@ Explicitly change the language for a style. ##### Parameters -- `style` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Mapbox GL style to modify -- `language` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The language iso code +* `style` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Mapbox GL style to modify +* `language` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The language iso code Returns **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the modified style + ## Develop Run the linter and watch for changes to rebuild with browserify. @@ -117,20 +118,21 @@ Run the linter and watch for changes to rebuild with browserify. Showcasing the languages supported by Mapbox Streets. -- [Your Browser language](https://mapbox.github.io/mapbox-gl-language/examples/browser.html) -- [Arabic](https://mapbox.github.io/mapbox-gl-language/examples/ar.html) -- [Chinese Simplified](https://mapbox.github.io/mapbox-gl-language/examples/zh-Hans.html) -- [Chinese Traditional](https://mapbox.github.io/mapbox-gl-language/examples/zh-Hant.html) -- [English](https://mapbox.github.io/mapbox-gl-language/examples/en.html) -- [French](https://mapbox.github.io/mapbox-gl-language/examples/fr.html) -- [German](https://mapbox.github.io/mapbox-gl-language/examples/de.html) -- [Italian](https://mapbox.github.io/mapbox-gl-language/examples/it.html) -- [Japanese](https://mapbox.github.io/mapbox-gl-language/examples/ja.html) -- [Korean](https://mapbox.github.io/mapbox-gl-language/examples/ko.html) -- [Multilingual](https://mapbox.github.io/mapbox-gl-language/examples/multilingual.html) -- [Portuguese](https://mapbox.github.io/mapbox-gl-language/examples/pt.html) -- [Russian](https://mapbox.github.io/mapbox-gl-language/examples/ru.html) -- [Spanish](https://mapbox.github.io/mapbox-gl-language/examples/es.html) +* [Your Browser language](https://mapbox.github.io/mapbox-gl-language/examples/browser.html) +* [Arabic](https://mapbox.github.io/mapbox-gl-language/examples/ar.html) +* [Chinese Simplified](https://mapbox.github.io/mapbox-gl-language/examples/zh-Hans.html) +* [Chinese Traditional](https://mapbox.github.io/mapbox-gl-language/examples/zh-Hant.html) +* [English](https://mapbox.github.io/mapbox-gl-language/examples/en.html) +* [French](https://mapbox.github.io/mapbox-gl-language/examples/fr.html) +* [German](https://mapbox.github.io/mapbox-gl-language/examples/de.html) +* [Italian](https://mapbox.github.io/mapbox-gl-language/examples/it.html) +* [Japanese](https://mapbox.github.io/mapbox-gl-language/examples/ja.html) +* [Korean](https://mapbox.github.io/mapbox-gl-language/examples/ko.html) +* [Multilingual](https://mapbox.github.io/mapbox-gl-language/examples/multilingual.html) +* [Portuguese](https://mapbox.github.io/mapbox-gl-language/examples/pt.html) +* [Russian](https://mapbox.github.io/mapbox-gl-language/examples/ru.html) +* [Spanish](https://mapbox.github.io/mapbox-gl-language/examples/es.html) +* [Vietnamese](https://mapbox.github.io/mapbox-gl-language/examples/vi.html) ## Supported Styles @@ -138,10 +140,10 @@ You can configure the plugin to support your own custom style using style transf 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](https://docs.mapbox.com/help/troubleshooting/streets-v8-migration-guide/): -- `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` +* `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` diff --git a/examples/ar.html b/examples/ar.html index 88c66ad..91de8f5 100644 --- a/examples/ar.html +++ b/examples/ar.html @@ -4,8 +4,8 @@ Mapbox GL Language - - + +