Attempt to localize mapbox UI

src/ui/control/fullscreen_control.js

@@ -94,11 +94,19 @@ class FullscreenControl {
     }
 
     _updateTitle() {
-        const title = this._isFullscreen() ? "Exit fullscreen" : "Enter fullscreen";
+        const title = this._getTitle();
         this._fullscreenButton.setAttribute("aria-label", title);
         this._fullscreenButton.title = title;
     }
 
+    _getTitle() {
+        if (this._isFullscreen()) {
+            return this._map._translateUiString("FullscreenControl.ExitTooltip") || "Exit fullscreen";
+        } else {
+            return this._map._translateUiString("FullscreenControl.EnterTooltip") || "Enter fullscreen";
+        }
+    }
+
     _isFullscreen() {
         return this._fullscreen;
     }

src/ui/localization/ui-translator.js

@@ -0,0 +1,56 @@
+// @flow
+
+import { clone, extend, warnOnce } from '../../util/util';
+import uk from './uk';
+
+const SupportedUiLanguages = {
+    'en': {},
+    'uk': uk
+};
+
+class UiTranslator
+{
+    _strings: object;
+
+    constructor(uiLanguage?: string, uiLanguagePatch?: object) {
+        switch (typeof uiLanguage) {
+            case 'string':
+                this._strings = SupportedUiLanguages[uiLanguage];
+                if (this._strings === undefined) {
+                    warnOnce(`uiLanguage '${uiLanguage}' is not supported`);
+                    this._strings = {};
+                }
+                break;
+
+            case 'null':
+            case 'undefined':
+                this._strings = {};
+                break;
+
+            default:
+                warnOnce(`'uiLanguage' expected to be a string but it is '${typeof uiLanguage}'`);
+                this._strings = {};
+                break;
+        }
+
+        switch (typeof uiLanguagePatch) {
+            case 'object':
+                this._strings = extend(clone(this._strings), uiLanguagePatch);
+                break;
+
+            case 'null':
+            case 'undefined':
+                break;
+
+            default:
+                warnOnce(`'uiLanguagePatch' expected to be an object but it is '${typeof uiLanguagePatch}'`);
+                break;
+        }
+    }
+
+    translate(key: string): string | undefined {
+        return this._strings[key];
+    }
+}
+
+export default UiTranslator;

src/ui/localization/uk.js

@@ -0,0 +1,6 @@
+const uk = {
+    'FullscreenControl.EnterTooltip': 'Повноекранний режим',
+    'FullscreenControl.ExitTooltip': 'Вийти з повноекранного режиму',
+};
+
+export default uk;

src/ui/map.js

@@ -43,6 +43,7 @@ import type DragPanHandler from './handler/drag_pan';
 import type KeyboardHandler from './handler/keyboard';
 import type DoubleClickZoomHandler from './handler/dblclick_zoom';
 import type TouchZoomRotateHandler from './handler/touch_zoom_rotate';
+import UiTranslator from './localization/ui-translator';
 import type {TaskID} from '../util/task_queue';
 import type {Cancelable} from '../types/cancelable';
 import type {
@@ -95,7 +96,9 @@ type MapOptions = {
     pitch?: number,
     renderWorldCopies?: boolean,
     maxTileCacheSize?: number,
-    transformRequest?: RequestTransformFunction
+    transformRequest?: RequestTransformFunction,
+    uiLanguage?: string,
+    uiLanguagePatch?: object
 };
 
 const defaultMinZoom = 0;
@@ -215,6 +218,8 @@ const defaultOptions = {
  * @param {boolean} [options.collectResourceTiming=false] If `true`, Resource Timing API information will be collected for requests made by GeoJSON and Vector Tile web workers (this information is normally inaccessible from the main Javascript thread). Information will be returned in a `resourceTiming` property of relevant `data` events.
  * @param {number} [options.fadeDuration=300] Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading.
  * @param {boolean} [options.crossSourceCollisions=true] If `true`, symbols from multiple sources can collide with each other during collision detection. If `false`, collision detection is run separately for the symbols in each source.
+ * @param {string} [options.uiLanguage='en'] A language to use in the UI. The only supported languages for now are 'en' & 'uk'. If an unsupported language is provided, 'en' will be used.
+ * @param {object} [options.uiLanguagePatch] A patch to apply to the localization table. You can replace all UI strings (thereby adding support for a new translation) or just part of them (thereby patching the default table for `uiLanguage`).
  * @example
  * var map = new mapboxgl.Map({
  *   container: 'map',
@@ -272,6 +277,7 @@ class Map extends Camera {
     _controls: Array<IControl>;
     _mapId: number;
     _localIdeographFontFamily: string;
+    _uiTranslator: UiTranslator;
 
     /**
      * The map's {@link ScrollZoomHandler}, which implements zooming in and out with a scroll wheel or trackpad.
@@ -335,6 +341,7 @@ class Map extends Camera {
         this._renderTaskQueue = new TaskQueue();
         this._controls = [];
         this._mapId = uniqueId();
+        this._uiTranslator = new UiTranslator(options.uiLanguage, options.uiLanguagePatch);
 
         const transformRequestFn = options.transformRequest;
         this._transformRequest = transformRequestFn ?
@@ -975,6 +982,10 @@ class Map extends Camera {
         }
     }
 
+    _translateUiString(key: string) {
+        return this._uiTranslator.translate(key);
+    }
+
     _updateStyle(style: StyleSpecification | string | null,  options?: {diff?: boolean} & StyleOptions) {
         if (this.style) {
             this.style.setEventedParent(null);