Localization

Search…
Localization
Kepler.gl supports localization through react-intl. Locale is determined by uiState.locale value. Current supported languages are:
locale code
Language
Default?
en
English
default
fi
Finish
​
pt
Portuguese
​
ca
Catalan
​
es
Spanish
​
ja
Japanese
​
cn
Chinese
​
ru
Русский
​
Changing default language
By default the first language is English en. The default language can be changed by giving locale value to uiState:
1
import {combineReducers} from 'redux';
2
import keplerGlReducer from 'kepler.gl/reducers';
3
import {LOCALE_CODES} from 'kepler.gl/localization';
4
​
5
const customizedKeplerGlReducer = keplerGlReducer.initialState({
6
  uiState: {
7
    // use Finnish locale
8
    locale: LOCALE_CODES.fi
9
  }
10
});
11
​
12
const reducers = combineReducers({
13
  keplerGl: customizedKeplerGlReducer,
14
  app: appReducer
15
});
Copied!
Adding new language
Let's say we want to add the Swedish language to kepler.gl. Easiest way to add translation of new language is to follow these 3 steps:
Find out the language code for Swedish: sv
Add new translation file src/localization/sv.js by copying src/localization/en.js and translating the strings
Update LOCALES in src/localization/locales.js to include new language translation:
1
export const LOCALES = {
2
  en : 'English',
3
  fi : 'Suomi',
4
  pt: 'Português',
5
  // add Swedish language
6
  sv: 'Svenska'
7
}
Copied!
Modify default translation or add new translation
the localeMessages prop of KeplerGl takes additional translations and merge with default translation.
Example 1. Update default translation
To update the english translation of layerManager.addData, pass localeMessages like this.
1
const localeMessages = {
2
  en: {
3
    ['layerManager.addData']: 'Add Data to Layer'
4
  }
5
};
6
​
7
const App = () => (
8
    <KeplerGl 
9
      id="map"
10
      localeMessages={messages}
11
      mapboxApiAccessToken={Token}
12
    />
13
);
Copied!
Example 2. Pass additional translation
Sometimes together with dependency injection, you might need to add additional translations to the customized component. For example, adding an additional settings panel in the side panel, you will need to provide a translation for the panel name assigned to sidebar.panels.settings
1
const localeMessages = {
2
  en: {
3
    ['sidebar.panels.settings']: 'Settings'
4
  }
5
};
6
​
7
const App = () => (
8
    <KeplerGl 
9
      id="map"
10
      localeMessages={messages}
11
      mapboxApiAccessToken={Token}
12
    />
13
);
Copied!
Custom theme
Jupyter Notebook
Last modified 1mo ago
Copy link
Contents
Changing default language
Adding new language
Modify default translation or add new translation
Example 1. Update default translation
Example 2. Pass additional translation