LogoLogo
  • Welcome
  • What's new?
  • Docs
    • User guides
      • Get Started
      • Kepler.gl workflow
        • Add data to layers
          • Adding Data Layers
          • Create a Layer
          • Blend and Rearrange Layers
          • Hide, Edit and Delete Layers
        • Add Data to the Map
      • Layers
        • Point
        • S2 Layer
        • Icon
        • Line
        • Cluster
        • Polygon
        • Hexbin
        • Grid
        • H3
        • Heatmap
        • Arc
        • Trip layer
      • Layer Attributes
      • Color Palettes
      • Filters
      • Map Styles
      • Interactions
      • Map Settings
      • Time Playback
      • Save and Export
      • FAQ
    • API Reference
      • ecosystem
      • Get Started
      • Advanced usages
        • Saving and Loading Maps with Schema Manager
        • Replace UI Component with Component Dependency Injection
        • Forward Dispatch Actions
        • Reducer Plugin
        • Using Updaters
        • Custom reducer initial state
        • custom-mapbox-host
      • Components
      • Reducers
        • reducers
        • map-style
        • map-state
        • combine
        • overview
        • ui-state
        • vis-state
      • Processors
        • All processors
      • Schemas
      • Actions
        • All actions
      • Cloud providers
        • Provider
      • Custom theme
      • Localization
    • Jupyter Notebook
  • Examples
    • Node/Express
    • Demo App
    • Open modal
    • Open modal
    • UMD client
    • Customize kepler.gl Theme
    • Customize kepler.gl Reducer
  • Contributing
    • Developing Kepler.gl
    • Contributor Covenant Code of Conduct
  • Change Log
  • Upgrade Guide
Powered by GitBook
On this page
  • Changing default language
  • Adding new language
  • Modify default translation or add new translation

Was this helpful?

  1. Docs
  2. API Reference

Localization

PreviousCustom themeNextJupyter Notebook

Last updated 6 months ago

Was this helpful?

Kepler.gl supports localization through . Locale is determined by uiState.locale value. Current supported languages are:

locale code
Language
Default?

en

English

default

fi

Finnish

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:

import {combineReducers} from 'redux';
import keplerGlReducer from '@kepler.gl/reducers';
import {LOCALE_CODES} from '@kepler.gl/localization';

const customizedKeplerGlReducer = keplerGlReducer.initialState({
  uiState: {
    // use Finnish locale
    locale: LOCALE_CODES.fi
  }
});

const reducers = combineReducers({
  keplerGl: customizedKeplerGlReducer,
  app: appReducer
});

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:

  • Add new translation file src/localization/translations/sv.js by copying src/localization/translations/en.js and translating the strings

  • Update LOCALES in src/localization/locales.js to include new language translation:

    export const LOCALES = {
      en : 'English',
      fi : 'Suomi',
      pt: 'Português',
      // add Swedish language
      sv: 'Svenska'
    }

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.

const localeMessages = {
  en: {
    ['layerManager.addData']: 'Add Data to Layer'
  }
};

const App = () => (
    <KeplerGl
      id="map"
      localeMessages={messages}
      mapboxApiAccessToken={Token}
    />
);

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

const localeMessages = {
  en: {
    ['sidebar.panels.settings']: 'Settings'
  }
};

const App = () => (
    <KeplerGl
      id="map"
      localeMessages={messages}
      mapboxApiAccessToken={Token}
    />
);

Find out the for Swedish: sv

react-intl
language code