Add localization for UI strings

debug/i18n.html

@@ -148,10 +148,14 @@
  style: 'mapbox://styles/mapbox/streets-v11',
  hash: true,
  language: language.value,
- worldview: worldview.value
+ worldview: worldview.value,
+ cooperativeGestures: false
 });
 
 map.addControl(new mapboxgl.ScaleControl());
+map.addControl(new mapboxgl.GeolocateControl());
+map.addControl(new mapboxgl.NavigationControl());
+map.addControl(new mapboxgl.FullscreenControl());
 mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js');
 
 map.on('style.load', () => {

debug/locale.html

@@ -36,11 +36,6 @@
  'NavigationControl.ResetBearing': 'X Reset bearing to north',
  'NavigationControl.ZoomIn': 'X Zoom in',
  'NavigationControl.ZoomOut': 'X Zoom out',
- 'ScaleControl.Feet': 'X ft',
- 'ScaleControl.Meters': 'X m',
- 'ScaleControl.Kilometers': 'X km',
- 'ScaleControl.Miles': 'X mi',
- 'ScaleControl.NauticalMiles': 'X nm',
  'ScrollZoomBlocker.CtrlMessage': 'X Use ctrl + scroll to zoom the map',
  'ScrollZoomBlocker.CmdMessage': 'X Use ⌘ + scroll to zoom the map',
  'TouchPanBlocker.Message': 'X Use two fingers to move the map'

src/ui/control/attribution_control.js

@@ -95,6 +95,11 @@ class AttributionControl {
  this._attribHTML = (undefined: any);
  }
 
+ _setLanguage() {
+ this._updateEditLink();
+ this._setElementTitle(this._compactButton, 'ToggleAttribution');
+ }
+
  _setElementTitle(element: HTMLElement, title: string) {
  const str = this._map._getUIString(`AttributionControl.${title}`);
  element.setAttribute('aria-label', str);

src/ui/control/fullscreen_control.js

@@ -71,6 +71,10 @@ class FullscreenControl {
  window.document.removeEventListener(this._fullscreenchange, this._changeIcon);
  }
 
+ _setLanguage() {
+ this._updateTitle();
+ }
+
  _checkFullscreenSupport(): boolean {
  return !!(
  window.document.fullscreenEnabled ||

src/ui/control/geolocate_control.js

@@ -158,6 +158,21 @@ class GeolocateControl extends Evented {
  this._noTimeout = false;
  }
 
+ _setButtonTitle(title: string) {
+ if (!this._map) return;
+ const str = this._map._getUIString(`GeolocateControl.${title}`);
+ this._geolocateButton.setAttribute('aria-label', str);
+ if (this._geolocateButton.firstElementChild) this._geolocateButton.firstElementChild.setAttribute('title', str);
+ }
+
+ _setLanguage() {
+ if (this._supportsGeolocation === false) {
+ this._setButtonTitle('LocationNotAvailable');
+ } else {
+ this._setButtonTitle('FindMyLocation');
+ }
+ }
+
  _checkGeolocationSupport(callback: (supported: boolean) => any) {
  if (this._supportsGeolocation !== undefined) {
  callback(this._supportsGeolocation);
@@ -377,9 +392,7 @@ class GeolocateControl extends Evented {
  this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background');
  this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background-error');
  this._geolocateButton.disabled = true;
- const title = this._map._getUIString('GeolocateControl.LocationNotAvailable');
- this._geolocateButton.setAttribute('aria-label', title);
- if (this._geolocateButton.firstElementChild) this._geolocateButton.firstElementChild.setAttribute('title', title);
+ this._setButtonTitle('LocationNotAvailable');
 
  if (this._geolocationWatchID !== undefined) {
  this._clearWatch();
@@ -418,14 +431,10 @@ class GeolocateControl extends Evented {
 
  if (supported === false) {
  warnOnce('Geolocation support is not available so the GeolocateControl will be disabled.');
- const title = this._map._getUIString('GeolocateControl.LocationNotAvailable');
+ this._setButtonTitle('LocationNotAvailable');
  this._geolocateButton.disabled = true;
- this._geolocateButton.setAttribute('aria-label', title);
- if (this._geolocateButton.firstElementChild) this._geolocateButton.firstElementChild.setAttribute('title', title);
  } else {
- const title = this._map._getUIString('GeolocateControl.FindMyLocation');
- this._geolocateButton.setAttribute('aria-label', title);
- if (this._geolocateButton.firstElementChild) this._geolocateButton.firstElementChild.setAttribute('title', title);
+ this._setButtonTitle('FindMyLocation');
  }
 
  if (this.options.trackUserLocation) {

src/ui/control/logo_control.js

@@ -17,6 +17,7 @@ import type Map, {ControlPosition} from '../map.js';
 
 class LogoControl {
  _map: Map;
+ _anchor: HTMLAnchorElement;
  _container: HTMLElement;
 
  constructor() {
@@ -26,13 +27,13 @@ class LogoControl {
  onAdd(map: Map): HTMLElement {
  this._map = map;
  this._container = DOM.create('div', 'mapboxgl-ctrl');
- const anchor = DOM.create('a', 'mapboxgl-ctrl-logo');
- anchor.target = "_blank";
- anchor.rel = "noopener nofollow";
- anchor.href = "https://www.mapbox.com/";
- anchor.setAttribute("aria-label", this._map._getUIString('LogoControl.Title'));
- anchor.setAttribute("rel", "noopener nofollow");
- this._container.appendChild(anchor);
+ this._anchor = DOM.create('a', 'mapboxgl-ctrl-logo');
+ this._anchor.target = "_blank";
+ this._anchor.rel = "noopener nofollow";
+ this._anchor.href = "https://www.mapbox.com/";
+ this._anchor.setAttribute("aria-label", this._map._getUIString('LogoControl.Title'));
+ this._anchor.setAttribute("rel", "noopener nofollow");
+ this._container.appendChild(this._anchor);
  this._container.style.display = 'none';
 
  this._map.on('sourcedata', this._updateLogo);
@@ -54,6 +55,10 @@ class LogoControl {
  return 'bottom-left';
  }
 
+ _setLanguage() {
+ this._anchor.setAttribute('aria-label', this._map._getUIString('LogoControl.Title'));
+ }
+
  _updateLogo(e: any) {
  if (!e || e.sourceDataType === 'metadata') {
  this._container.style.display = this._logoRequired() ? 'block' : 'none';

src/ui/control/navigation_control.js

@@ -150,6 +150,17 @@ class NavigationControl {
  this._map = undefined;
  }
 
+ _setLanguage() {
+ if (this.options.showZoom) {
+ this._setButtonTitle(this._zoomInButton, 'ZoomIn');
+ this._setButtonTitle(this._zoomOutButton, 'ZoomOut');
+ }
+
+ if (this.options.showCompass) {
+ this._setButtonTitle(this._compass, 'ResetBearing');
+ }
+ }
+
  _createButton(className: string, fn: () => mixed): HTMLButtonElement {
  const a = DOM.create('button', className, this._container);
  a.type = 'button';

src/ui/get_ui_string.js

@@ -0,0 +1,64 @@
+// @flow
+
+import ar from './locales/ar.js';
+import ca from './locales/ca.js';
+import da from './locales/da.js';
+import de from './locales/de.js';
+import en from './locales/en.js';
+import es from './locales/es.js';
+import fa from './locales/fa.js';
+import fi from './locales/fi.js';
+import fr from './locales/fr.js';
+import he from './locales/he.js';
+import hu from './locales/hu.js';
+import it from './locales/it.js';
+import ja from './locales/ja.js';
+import ko from './locales/ko.js';
+import nl from './locales/nl.js';
+import pl from './locales/pl.js';
+import pt from './locales/pt.js';
+import ro from './locales/ro.js';
+import ru from './locales/ru.js';
+import sr from './locales/sr.js';
+import sv from './locales/sv.js';
+import tl from './locales/tl.js';
+import tr from './locales/tr.js';
+import uk from './locales/uk.js';
+import vi from './locales/vi.js';
+import zhHans from './locales/zh-Hans.js';
+
+const locales = {
+ ar,
+ ca,
+ da,
+ de,
+ en,
+ es,
+ fa,
+ fi,
+ fr,
+ he,
+ hu,
+ it,
+ ja,
+ ko,
+ nl,
+ pl,
+ pt,
+ ro,
+ ru,
+ sr,
+ sv,
+ tl,
+ tr,
+ uk,
+ vi,
+ zhHans
+};
+
+function getUIString(language: string, key: string): ?string {
+ const locale = locales[language] || locales['en'];
+ return locale[key] || null;
+}
+
+export default getUIString;

src/ui/handler/scroll_zoom.js

@@ -382,15 +382,19 @@ class ScrollZoomHandler {
  this._active = false;
  }
 
+ _getAlertContainerText(): string {
+ if (/(Mac|iPad)/i.test(window.navigator.userAgent)) {
+ return this._map._getUIString('ScrollZoomBlocker.CmdMessage');
+ } else {
+ return this._map._getUIString('ScrollZoomBlocker.CtrlMessage');
+ }
+ }
+
  _addScrollZoomBlocker() {
  if (this._map && !this._alertContainer) {
  this._alertContainer = DOM.create('div', 'mapboxgl-scroll-zoom-blocker', this._map._container);
-
- if (/(Mac|iPad)/i.test(window.navigator.userAgent)) {
- this._alertContainer.textContent = this._map._getUIString('ScrollZoomBlocker.CmdMessage');
- } else {
- this._alertContainer.textContent = this._map._getUIString('ScrollZoomBlocker.CtrlMessage');
- }
+ this._alertContainer.textContent = this._getAlertContainerText();
+ this._alertContainer.dir = 'auto';
 
  // dynamically set the font size of the scroll zoom blocker alert message
  this._alertContainer.style.fontSize = `${Math.max(10, Math.min(24, Math.floor(this._el.clientWidth * 0.05)))}px`;
@@ -412,6 +416,11 @@ class ScrollZoomHandler {
  }, 200);
  }
 
+ _setLanguage() {
+ if (this._alertContainer) {
+ this._alertContainer.textContent = this._getAlertContainerText();
+ }
+ }
 }
 
 export default ScrollZoomHandler;

src/ui/handler/touch_pan.js

@@ -137,8 +137,8 @@ export default class TouchPanHandler {
  _addTouchPanBlocker() {
  if (this._map && !this._alertContainer) {
  this._alertContainer = DOM.create('div', 'mapboxgl-touch-pan-blocker', this._map._container);
-
  this._alertContainer.textContent = this._map._getUIString('TouchPanBlocker.Message');
+ this._alertContainer.dir = 'auto';
 
  // dynamically set the font size of the touch pan blocker alert message
  this._alertContainer.style.fontSize = `${Math.max(10, Math.min(24, Math.floor(this._el.clientWidth * 0.05)))}px`;
@@ -157,4 +157,9 @@ export default class TouchPanHandler {
  }, 500);
  }
 
+ _setLanguage() {
+ if (this._alertContainer) {
+ this._alertContainer.textContent = this._map._getUIString('TouchPanBlocker.Message');
+ }
+ }
 }

src/ui/locales/ar.js

@@ -0,0 +1,20 @@
+// @flow
+
+const locale = {
+ "AttributionControl.ToggleAttribution": "تبديل الإحالة",
+ "AttributionControl.MapFeedback": "علق على الخريطة",
+ "FullscreenControl.Enter": "أدخل وضع ملء الشاشة",
+ "FullscreenControl.Exit": "الخروج من وضع ملء الشاشة",
+ "GeolocateControl.FindMyLocation": "البحث عن موقعي",
+ "GeolocateControl.LocationNotAvailable": "الموقع غير متوفر",
+ "LogoControl.Title": "Mapbox شعار",
+ "Map.Title": "خريطة",
+ "NavigationControl.ResetBearing": "إعادة تعيين الإتجاة للشمال",
+ "NavigationControl.ZoomIn": "تكبير",
+ "NavigationControl.ZoomOut": "تصغير",
+ "ScrollZoomBlocker.CtrlMessage": "استخدم مفتاح ‫ctrl‬ + التمرير لتكبير الخريطة",
+ "ScrollZoomBlocker.CmdMessage": "استخدم مفتاح ⌘ + التمرير لتكبير الخريطة",
+ "TouchPanBlocker.Message": "استخدم إصبعين لتحريك الخريطة"
+};
+
+export default locale;

src/ui/locales/ca.js

@@ -0,0 +1,20 @@
+// @flow
+
+const locale = {
+ "AttributionControl.ToggleAttribution": "Mostrar atribució",
+ "AttributionControl.MapFeedback": "Comentaris sobre el mapa",
+ "FullscreenControl.Enter": "Entra a pantalla completa",
+ "FullscreenControl.Exit": "Sortir de pantalla completa",
+ "GeolocateControl.FindMyLocation": "Troba la meva ubicació",
+ "GeolocateControl.LocationNotAvailable": "Ubicació no disponible",
+ "LogoControl.Title": "Logotip de Mapbox",
+ "Map.Title": "Mapa",
+ "NavigationControl.ResetBearing": "Restableix l'orientació cap al nord",
+ "NavigationControl.ZoomIn": "Ampliar",
+ "NavigationControl.ZoomOut": "Disminuir el zoom",
+ "ScrollZoomBlocker.CtrlMessage": "Utilitzeu ctrl + desplaçament per ampliar el mapa",
+ "ScrollZoomBlocker.CmdMessage": "Utilitzeu ⌘ + desplaçament per ampliar el mapa",
+ "TouchPanBlocker.Message": "Feu servir dos dits per moure el mapa"
+};
+
+export default locale;

src/ui/locales/cs.js

@@ -0,0 +1,20 @@
+// @flow
+
+const locale = {
+ "AttributionControl.ToggleAttribution": "Přepnout atribuci",
+ "AttributionControl.MapFeedback": "Zpětná vazba na mapu",
+ "FullscreenControl.Enter": "Vstupte na celou obrazovku",
+ "FullscreenControl.Exit": "Ukončete celou obrazovku",
+ "GeolocateControl.FindMyLocation": "Najít moji polohu",
+ "GeolocateControl.LocationNotAvailable": "Poloha není k dispozici",
+ "LogoControl.Title": "Logo Mapbox",
+ "Map.Title": "Mapa",
+ "NavigationControl.ResetBearing": "Resetujte azimut na sever",
+ "NavigationControl.ZoomIn": "Přiblížit",
+ "NavigationControl.ZoomOut": "Oddálit",
+ "ScrollZoomBlocker.CtrlMessage": "Pro přiblížení mapy použijte ctrl + scroll",
+ "ScrollZoomBlocker.CmdMessage": "Pomocí ⌘ + posouvání mapu přiblížíte",
+ "TouchPanBlocker.Message": "Pomocí dvou prstů posuňte mapu"
+};
+
+export default locale;

src/ui/locales/da.js

@@ -0,0 +1,20 @@
+// @flow
+
+const locale = {
+ "AttributionControl.ToggleAttribution": "Slå attribuering til/fra",
+ "AttributionControl.MapFeedback": "Feedback om kortet",
+ "FullscreenControl.Enter": "Skift til fuld skærm",
+ "FullscreenControl.Exit": "Luk fuld skærm",
+ "GeolocateControl.FindMyLocation": "Find min position",
+ "GeolocateControl.LocationNotAvailable": "Position utilgængelig",
+ "LogoControl.Title": "Mapbox logo",
+ "Map.Title": "Kort",
+ "NavigationControl.ResetBearing": "Nulstil pejling til nord",
+ "NavigationControl.ZoomIn": "Zoom ind",
+ "NavigationControl.ZoomOut": "Zoom ud",
+ "ScrollZoomBlocker.CtrlMessage": "Brug ctrl + scroll for at zoome ind på kortet",
+ "ScrollZoomBlocker.CmdMessage": "Brug ⌘ + scroll for at zoome ind på kortet",
+ "TouchPanBlocker.Message": "Brug to fingre til at flytte kortet"
+};
+
+export default locale;

src/ui/locales/de.js

@@ -0,0 +1,20 @@
+// @flow
+
+const locale = {
+ "AttributionControl.ToggleAttribution": "Attribuierung umschalten",
+ "AttributionControl.MapFeedback": "Karten-Feedback",
+ "FullscreenControl.Enter": "Vollbildmodus aktivieren",
+ "FullscreenControl.Exit": "Vollbildmodus beenden",
+ "GeolocateControl.FindMyLocation": "Finde meinen Standort",
+ "GeolocateControl.LocationNotAvailable": "Position nicht verfügbar",
+ "LogoControl.Title": "Mapbox-Logo",
+ "Map.Title": "Karte",
+ "NavigationControl.ResetBearing": "Setze die Orientierung auf Norden zurück",
+ "NavigationControl.ZoomIn": "Hineinzoomen",
+ "NavigationControl.ZoomOut": "Herauszoomen",
+ "ScrollZoomBlocker.CtrlMessage": "Verwenden Sie Strg + Scrollen, um die Karte zu zoomen",
+ "ScrollZoomBlocker.CmdMessage": "Verwenden Sie ⌘ + Scrollen, um die Karte zu zoomen",
+ "TouchPanBlocker.Message": "Verwenden Sie zwei Finger, um die Karte zu verschieben"
+};
+
+export default locale;