feat(Control): Add LanguageControl

README.md

@@ -38,6 +38,20 @@ npm install --save mapbox-gl @urbica/react-map-gl
 yarn add mapbox-gl @urbica/react-map-gl
 ```
 
+### Optional Dependency
+
+If you use the `LanguageControl`:
+
+```shell
+npm install --save @mapbox/mapbox-gl-language
+```
+
+...or if you are using yarn:
+
+```shell
+yarn add @mapbox/mapbox-gl-language
+```
+
 ## Components
 
 | Component                                                 | Description                                                                                                            |
@@ -51,6 +65,7 @@ yarn add mapbox-gl @urbica/react-map-gl
 | [Marker](src/components/Marker)                           | React Component for [Mapbox GL JS Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker)                            |
 | [FeatureState](src/components/FeatureState)               | Sets the state of a geographic feature rendered on the map                                                             |
 | [AttributionControl](src/components/AttributionControl)   | Represents the map's attribution information                                                                           |
+| [LanguageControl](src/components/LanguageControl)         | Change the language of the map                                                                                         |
 | [FullscreenControl](src/components/FullscreenControl)     | Contains a button for toggling the map in and out of fullscreen mode                                                   |
 | [GeolocateControl](src/components/GeolocateControl)       | Geolocate the user and then track their current location on the map                                                    |
 | [NavigationControl](src/components/NavigationControl)     | Contains zoom buttons and a compass                                                                                    |

package.json

@@ -16,6 +16,7 @@
   "scripts": {
     "start": "styleguidist server",
     "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
     "test": "jest test",
     "test:coverage": "jest test --coverage && codecov",
     "flow": "flow check",
@@ -105,5 +106,8 @@
       "jest --findRelatedTests",
       "git add"
     ]
+  },
+  "optionalDependencies": {
+    "@mapbox/mapbox-gl-language": "^0.10.0"
   }
 }

src/components/LanguageControl/README.md

@@ -0,0 +1,19 @@
+A `LanguageControl` that modifies the layers of the map style to use the 'text-field' that matches the browser language.
+⚠️ Require the package `@mapbox/mapbox-gl-language` (`npm install --save @mapbox/mapbox-gl-language`)
+
+```jsx
+import React from 'react';
+import MapGL, { LangugageControl } from '@urbica/react-map-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+<MapGL
+  style={{ width: '100%', height: '400px' }}
+  mapStyle='mapbox://styles/mapbox/light-v9'
+  accessToken={MAPBOX_ACCESS_TOKEN}
+  latitude={37.78}
+  longitude={-122.41}
+  zoom={11}
+>
+  <LanguageControl options={{ defaultLanguage: 'fr' }} />
+</MapGL>;
+```

src/components/LanguageControl/index.js

@@ -0,0 +1,74 @@
+// @flow
+
+import { PureComponent, createElement } from 'react';
+import type MapboxMap from 'mapbox-gl/src/ui/map';
+import type MapboxLanguageControl from '@mapbox/mapbox-gl-language/index';
+
+import MapboxLanguage from '@mapbox/mapbox-gl-language';
+import MapContext from '../MapContext';
+
+type Props = {
+  /* Options to configure the plugin. */
+  options?: {
+    /* List of supported languages */
+    supportedLanguages?: string[],
+    /* Custom style transformation to apply */
+    languageTransform?: Function,
+    /**
+     * RegExp to match if a text-field is a language field
+     * (optional, default /^\{name/)
+     */
+    languageField?: RegExp,
+    /* Given a language choose the field in the vector tiles */
+    getLanguageField?: Function,
+    /* Name of the source that contains the different languages. */
+    languageSource?: string,
+    /* Name of the default language to initialize style after loading. */
+    defaultLanguage?: string
+  }
+};
+
+/**
+ * Adds support for switching the language of your map style.
+ */
+class LanguageControl extends PureComponent<Props> {
+  _map: MapboxMap;
+
+  _control: MapboxLanguageControl;
+
+  static defaultProps = {};
+
+  componentDidMount() {
+    const map: MapboxMap = this._map;
+
+    const control: MapboxLanguageControl = new MapboxLanguage(
+      this.props.options
+    );
+
+    map.addControl(control);
+    this._control = control;
+  }
+
+  componentWillUnmount() {
+    if (!this._map || !this._control) {
+      return;
+    }
+
+    this._map.removeControl(this._control);
+  }
+
+  getControl() {
+    return this._control;
+  }
+
+  render() {
+    return createElement(MapContext.Consumer, {}, (map) => {
+      if (map) {
+        this._map = map;
+      }
+      return null;
+    });
+  }
+}
+
+export default LanguageControl;

src/components/LanguageControl/index.test.js

@@ -0,0 +1,25 @@
+/* eslint-disable no-console */
+
+import React from 'react';
+import { mount } from 'enzyme';
+import MapGL, { LanguageControl } from '../..';
+
+test('render', () => {
+  const wrapper = mount(
+    <MapGL latitude={0} longitude={0} zoom={0}>
+      <LanguageControl />
+    </MapGL>
+  );
+
+  expect(wrapper.find('LanguageControl').exists()).toBe(true);
+
+  wrapper.unmount();
+  expect(wrapper.find('LanguageControl').exists()).toBe(false);
+});
+
+test('throws', () => {
+  console.error = jest.fn();
+
+  expect(() => mount(<LanguageControl />)).toThrow();
+  expect(console.error).toHaveBeenCalled();
+});

src/index.js

@@ -13,3 +13,4 @@ export { default as FullscreenControl } from './components/FullscreenControl';
 export { default as GeolocateControl } from './components/GeolocateControl';
 export { default as NavigationControl } from './components/NavigationControl';
 export { default as ScaleControl } from './components/ScaleControl';
+export { default as LanguageControl } from './components/LanguageControl';

styleguide.config.js

@@ -40,7 +40,8 @@ module.exports = {
         'src/components/FullscreenControl/index.js',
         'src/components/GeolocateControl/index.js',
         'src/components/NavigationControl/index.js',
-        'src/components/ScaleControl/index.js'
+        'src/components/ScaleControl/index.js',
+        'src/components/LanguageControl/index.js'
       ]
     }
   ],

yarn.lock

@@ -1006,6 +1006,11 @@
   resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234"
   integrity sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=
 
+"@mapbox/mapbox-gl-language@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-language/-/mapbox-gl-language-0.10.0.tgz#f93fb05cde7a8c092c29ff393c51b54e2e26611d"
+  integrity sha512-BBJ6CQStZbGKfARPOcVol97J5PLaLEbm6ya/PzzhC4Aw7f7a3cBiV5p6SYQFGhyAh2Z8MxjFaXH18xyB8KgrkA==
+
 "@mapbox/mapbox-gl-supported@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.4.0.tgz#36946b22944fe2cfa43cfafd5ef36fdb54a069e4"