Merge pull request #17 from sergei-zelinsky/master

Add local language support
mapbox · Jul 6, 2018 · f205b93 · f205b93
2 parents 2babf3b + a996bed
commit f205b93
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -110,6 +110,7 @@ Showcasing the languages supported by Mapbox Streets.
 - [German](https://mapbox.github.io/mapbox-gl-language/examples/de.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)

diff --git a/examples/multilingual.html b/examples/multilingual.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <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/v0.36.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css' rel='stylesheet' />
+    <script src='../index.js'></script>
+    <style>
+        body { margin:0; padding:0; }
+        #map { position:absolute; top:0; bottom:0; width:100%; }
+    </style>
+</head>
+<body>
+
+<div id='map'></div>
+<script>
+mapboxgl.accessToken = 'pk.eyJ1IjoibHVrYXNtYXJ0aW5lbGxpIiwiYSI6ImNpem85dmhwazAyajIyd284dGxhN2VxYnYifQ.HQCmyhEXZUTz3S98FMrVAQ';
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v10',
+    center: [-98, 38.88],
+    minZoom: 2,
+    zoom: 3
+});
+mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
+map.addControl(new MapboxLanguage({
+  defaultLanguage: 'mul'
+}));
+</script>
+
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -23,7 +23,7 @@ function MapboxLanguage(options) {
   this._defaultLanguage = options.defaultLanguage;
   this._isLanguageField = options.languageField || /^\{name/;
   this._getLanguageField = options.getLanguageField || function nameField(language) {
-    return '{name_' + language + '}';
+    return language === 'mul' ? '{name}' : '{name_' + language + '}';
   };
   this._languageSource = options.languageSource || null;
   this._languageTransform = options.languageTransform || function (style, language) {
@@ -34,7 +34,7 @@ function MapboxLanguage(options) {
     }
   };
   this._excludedLayerIds = options.excludedLayerIds || [];
-  this.supportedLanguages = options.supportedLanguages || ['ar', 'en', 'es', 'fr', 'de', 'ja', 'ko', 'pt', 'ru', 'zh'];
+  this.supportedLanguages = options.supportedLanguages || ['ar', 'en', 'es', 'fr', 'de', 'ja', 'ko', 'mul', 'pt', 'ru', 'zh'];
 }
 
 function standardSpacing(style) {

diff --git a/test/index.test.js b/test/index.test.js
@@ -41,7 +41,7 @@ test('setLanguage for different text fields', (assert) => {
         [6, '{name_es}']
       ]
     }
-  }, 'switch style to spanish name field');
+  }, 'switch style to english name field');
 
   var arStyle = language.setLanguage(style, 'ar');
   assert.deepEqual(arStyle.layers[0].layout, {
@@ -53,7 +53,19 @@ test('setLanguage for different text fields', (assert) => {
         [6, '{name_ar}']
       ]
     }
-  }, 'switch style to spanish arabic field');
+  }, 'switch style to arabic name field');
+
+  var mulStyle = language.setLanguage(style, 'mul');
+  assert.deepEqual(mulStyle.layers[0].layout, {
+    'text-letter-spacing': 0.15,
+    'text-field': {
+      'base': 1,
+      'stops': [
+        [0, '{abbr}'],
+        [6, '{name}']
+      ]
+    }
+  }, 'switch style to multilingual name field');
 
   assert.end();
 });