Prepare v1.0.0 release (#42)

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
 node_js:
-- "6"
+- "14"
 script:
 - npm test

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))

README.md

@@ -6,19 +6,19 @@ 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
 
 **mapbox-gl-language** is a [Mapbox GL JS plugin](https://www.mapbox.com/blog/build-mapbox-gl-js-plugins/) 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/v0.10.1/mapbox-gl-language.js'></script>
+        <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
 
 **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,53 +59,54 @@ 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)&lt;[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)&lt;[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
 
 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
 
+<!-- End generated code -->
 ## Develop
 
 Run the linter and watch for changes to rebuild with browserify.
@@ -117,31 +118,32 @@ 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
 
 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](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`

examples/ar.html

@@ -4,8 +4,8 @@
     <meta charset='utf-8' />
     <title>Mapbox GL Language</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
     <script src='../index.js'></script>
     <style>
         body { margin:0; padding:0; }

examples/browser.html

@@ -4,8 +4,8 @@
     <meta charset='utf-8' />
     <title>Mapbox GL Language</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
     <script src='../index.js'></script>
     <style>
         body { margin:0; padding:0; }

examples/cdn.html

@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Mapbox GL Language</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
-    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.1/mapbox-gl-language.js'></script>
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
     <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }

examples/dark.html

@@ -4,8 +4,8 @@
     <meta charset='utf-8' />
     <title>Mapbox GL Language</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
     <script src='../index.js'></script>
     <style>
         body { margin:0; padding:0; }

examples/de.html

@@ -4,8 +4,8 @@
     <meta charset='utf-8' />
     <title>Mapbox GL Language</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
     <script src='../index.js'></script>
     <style>
         body { margin:0; padding:0; }

examples/en.html

@@ -4,8 +4,8 @@
     <meta charset='utf-8' />
     <title>Mapbox GL Language</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
     <script src='../index.js'></script>
     <style>
         body { margin:0; padding:0; }

examples/es.html

@@ -4,8 +4,8 @@
     <meta charset='utf-8' />
     <title>Mapbox GL Language</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
     <script src='../index.js'></script>
     <style>
         body { margin:0; padding:0; }

examples/fr.html

@@ -4,8 +4,8 @@
     <meta charset='utf-8' />
     <title>Mapbox GL Language</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
     <script src='../index.js'></script>
     <style>
         body { margin:0; padding:0; }

examples/it.html

@@ -4,8 +4,8 @@
     <meta charset='utf-8' />
     <title>Mapbox GL Language</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
     <script src='../index.js'></script>
     <style>
         body { margin:0; padding:0; }

examples/ja.html

@@ -4,8 +4,8 @@
     <meta charset='utf-8' />
     <title>Mapbox GL Language</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css' rel='stylesheet' />
     <script src='../index.js'></script>
     <style>
         body { margin:0; padding:0; }