### Installation

Source: https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/get-started.md

Install kepler.gl and its core components using npm.

```sh
npm install --save kepler.gl @kepler.gl/components @kepler.gl/reducers
```

--------------------------------

### Basic Usage - Full Example

Source: https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/get-started.md

A complete React component setup demonstrating how to integrate Kepler.gl into an application, including Redux store configuration and component mounting.

```js
import * as React from "react";
import ReactDOM from "react-dom/client";
import document from "global/document";

import { applyMiddleware, combineReducers, compose, createStore } from "redux";
import { connect, Provider } from "react-redux";

import keplerGlReducer, { enhanceReduxMiddleware } from "@kepler.gl/reducers";
import KeplerGl from "@kepler.gl/components";

import AutoSizer from "react-virtualized/dist/commonjs/AutoSizer";

const reducers = combineReducers({
  keplerGl: keplerGlReducer.initialState({
    uiState: {
      readOnly: false,
      currentModal: null,
    },
  }),
});

const middleWares = enhanceReduxMiddleware([
  // Add other middlewares here
]);

const enhancers = applyMiddleware(...middleWares);

const initialState = {};
const store = createStore(reducers, initialState, compose(enhancers));

const App = () => (
  <div
    style={{
      position: "absolute",
      top: "0px",
      left: "0px",
      width: "100%",
      height: "100%",
    }}
  >
    <AutoSizer>
      {({ height, width }) => (
        <KeplerGl
          mapboxApiAccessToken="xxx" // Replace with your mapbox token
          id="map"
          width={width}
          height={height}
        />
      )}
    </AutoSizer>
  </div>
);

const mapStateToProps = (state) => state;
const dispatchToProps = (dispatch) => ({ dispatch });
const ConnectedApp = connect(mapStateToProps, dispatchToProps)(App);
const Root = () => (
  <Provider store={store}>
    <ConnectedApp />
  </Provider>
);

export default Root;

```

--------------------------------

### Development Setup

Source: https://github.com/keplergl/kepler.gl/blob/master/website/README.md

Install dependencies and start the development server. Requires a Mapbox access token.

```bash
npm install // or yarn
export MapboxAccessToken=<insert_your_token> && npm start
```

--------------------------------

### Running an Example Project

Source: https://github.com/keplergl/kepler.gl/blob/master/examples/README.md

Instructions to start any of the example projects locally.

```bash
yarn && yarn start
```

--------------------------------

### Mount Component

Source: https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/get-started.md

Basic example of mounting the KeplerGl component.

```js
import KeplerGl from '@kepler.gl/components';

const Map = props => (
  <KeplerGl
      id="foo"
      mapboxApiAccessToken={token}
      width={width}
      height={height}/>
);
```

--------------------------------

### Start the App

Source: https://github.com/keplergl/kepler.gl/blob/master/examples/demo-app/README.md

Starts the local development server for the demo application.

```sh
yarn start:local
```

--------------------------------

### Example of replacing a component

Source: https://github.com/keplergl/kepler.gl/blob/master/UPGRADE-GUIDE.md

An example demonstrating how to support custom side panel tabs by replacing components.

```bash
https://github.com/keplergl/kepler.gl/tree/master/examples/replace-component
```

--------------------------------

### Install Dependencies and Start Demo App

Source: https://github.com/keplergl/kepler.gl/blob/master/contributing/DEVELOPERS.md

Commands to install project dependencies, set up environment variables, and start the Kepler.gl demo application.

```bash
# Install Puppeteer
yarn dlx puppeteer


# Install JavaScript dependencies:
yarn install
yarn bootstrap

# Setup Mapbox access token locally
export MapboxAccessToken=<MapboxAccessToken>
# Set up other environment variables
export DropboxClientId=<DropboxClientId>
export MapboxExportToken=<MapboxExportToken>
export CartoClientId=<CartoClientId>
export FoursquareClientId=<FoursquareClientId>
export FoursquareDomain=<FoursquareDomain>
export FoursquareAPIURL=<FoursquareAPIURL>
export FoursquareUserMapsURL=<FoursquareUserMapsURL>

# Start the kepler.gl demo app
yarn start
```

--------------------------------

### Install Dependencies (Root)

Source: https://github.com/keplergl/kepler.gl/blob/master/examples/demo-app/README.md

Installs all project dependencies from the root directory.

```sh
yarn bootstrap
```

--------------------------------

### Quick Start

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/python/README.md

A quick start example demonstrating how to create a KeplerGl map, add data, and display it.

```python
from keplergl import KeplerGl

# Create a map
map = KeplerGl(height=400)

# Add data
map.add_data(data=df, name='my_data')

# Display the map
map
```

--------------------------------

### Install JavaScript dependencies and build the frontend

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/python/DEVELOPMENT.md

Install necessary Node.js packages and build the frontend assets for the Kepler.gl widget.

```bash
npm install
npm run build
```

--------------------------------

### Start Jupyter Lab with pip

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/python/DEVELOPMENT.md

Launch Jupyter Lab after installing the Python package with 'pip'.

```bash
jupyter lab
```

--------------------------------

### Add Data to Map

Source: https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/get-started.md

Example of dispatching the `addDataToMap` action to add datasets and configurations to a Kepler.gl instance.

```js
import {addDataToMap} from '@kepler.gl/actions';

this.props.dispatch(
  addDataToMap({
    // datasets
    datasets: {
      info: {
        label: 'Sample Taxi Trips in New York City',
        id: 'test_trip_data'
      },
      data: sampleTripData
    },
    // option
    option: {
      centerMap: true,
      readOnly: false
    },
    // config
    config: {
      mapStyle: {styleType: 'light'}
    }
  })
);
```

--------------------------------

### Mount Reducer

Source: https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/get-started.md

Example of mounting the keplerGl reducer into the Redux store, along with taskMiddleware for handling side effects.

```js
import keplerGlReducer from '@kepler.gl/reducers';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import {taskMiddleware} from 'react-palm/tasks';

const reducer = combineReducers({
  // <-- mount kepler.gl reducer in your app
  keplerGl: keplerGlReducer,

  // Your other reducers here
  app: appReducer
});

// create store
const store = createStore(reducer, {}, applyMiddleware(taskMiddleware));
```

--------------------------------

### Running with Docker Compose - Production Mode

Source: https://github.com/keplergl/kepler.gl/blob/master/docker/README.md

Starts the production environment using Docker Compose, serving a static build.

```bash
docker compose -f docker/docker-compose.yml up kepler-prod
```

--------------------------------

### Development Commands

Source: https://github.com/keplergl/kepler.gl/blob/master/website/src/README.md

Commands to install dependencies and start the development server for Kepler.gl.

```bash
npm install
export MapboxAccessToken=<insert_your_token> && npm start
```

--------------------------------

### Install Volta

Source: https://github.com/keplergl/kepler.gl/blob/master/contributing/DEVELOPERS.md

Instructions for installing Volta on Unix/macOS and Windows.

```bash
# install Volta on Unix
curl https://get.volta.sh | bash
```

```bash
winget install Volta.Volta
```

--------------------------------

### Install Dependencies

Source: https://github.com/keplergl/kepler.gl/blob/master/examples/get-started-vite/README.md

Installs the necessary dependencies for the project.

```bash
# Install dependencies
yarn install
```

--------------------------------

### Start Jupyter Lab with uv

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/python/DEVELOPMENT.md

Launch Jupyter Lab using the 'uv' package manager to manage the Python environment.

```bash
uv run jupyter lab
```

--------------------------------

### Accessor Example

Source: https://github.com/keplergl/kepler.gl/blob/master/src/table/UPGRADE-data-container.md

Accessors in default Kepler layers now expect a data container as a parameter.

```javascript
const pointPosAccessor = config => dc => d => {
  return ...
}
```

--------------------------------

### Running with Docker Compose - Development Mode

Source: https://github.com/keplergl/kepler.gl/blob/master/docker/README.md

Starts the development environment using Docker Compose, enabling esbuild watch mode inside the container.

```bash
docker compose -f docker/docker-compose.yml up kepler-dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/keplergl/kepler.gl/blob/master/examples/replace-component/README.md

Installs the necessary project dependencies.

```shell
yarn install
```

--------------------------------

### Start Development Server for Website

Source: https://github.com/keplergl/kepler.gl/blob/master/contributing/DEVELOPERS.md

Command to start the development server for the Kepler.gl website.

```bash
yarn web
```

--------------------------------

### Start the Application

Source: https://github.com/keplergl/kepler.gl/blob/master/examples/custom-map-style/README.md

Starts the development server for the application.

```shell
yarn start
```

--------------------------------

### Kepler.gl UMD Client Setup

Source: https://github.com/keplergl/kepler.gl/blob/master/examples/umd-client/index.html

This script demonstrates how to set up and render a Kepler.gl map within a UMD (Universal Module Definition) client environment. It includes configuration for the Redux store, React components, and rendering the map.

```javascript
Kepler.gl embedded map      body { margin: 0; padding: 0; overflow: hidden; } / **
 * Provide your MapBox Token (Used in pre 3.x kepler.gl)
 ** /
const MAPBOX_TOKEN = 'PROVIDE_MAPBOX_TOKEN';
const WARNING_MESSAGE = 'Please Provide a Mapbox Token in order to use Kepler.gl. Edit this file and fill out MAPBOX_TOKEN with your access key';

/* Validate Mapbox Token */
if ((MAPBOX_TOKEN || '') === '' || MAPBOX_TOKEN === 'PROVIDE_MAPBOX_TOKEN') {
  alert(WARNING_MESSAGE);
}
/** STORE **/
const reducers = (function createReducers(redux, keplerGl) {
  return redux.combineReducers({
    // mount keplerGl reducer
    keplerGl: keplerGl.keplerGlReducer
  });
})(Redux, KeplerGl);

const middleWares = (function createMiddlewares(keplerGl) {
  return keplerGl.enhanceReduxMiddleware([
    // Add other middlewares here
  ]);
})(KeplerGl);

const enhancers = (function craeteEnhancers(redux, middles) {
  return redux.applyMiddleware(...middles);
})(Redux, middleWares);

const store = (function createStore(redux, enhancers) {
  const initialState = {};
  return redux.createStore(reducers, initialState, redux.compose(enhancers));
})(Redux, enhancers);
/** END STORE **/

/** COMPONENTS **/
const KeplerElement = (function (react, keplerGl, mapboxToken) {
  return function (props) {
    return react.createElement(
      'div',
      {style: {position: 'absolute', left: 0, width: '100vw', height: '100vh'}},
      react.createElement(keplerGl.KeplerGl,
        {
          mapboxApiAccessToken: mapboxToken,
          id: 'map',
          width: props.width || 1200,
          height: props.height || 800
        }
      )
    );
  };
})(React, KeplerGl, MAPBOX_TOKEN);

const app = (function createReactReduxProvider(react, reactRedux, KeplerElement) {
  return react.createElement(
    reactRedux.Provider,
    {store},
    react.createElement(KeplerElement, null)
  );
})(React, ReactRedux, KeplerElement);
/** END COMPONENTS **/

/** Render **/
(function render(react, reactDOM, app) {
  const container = document.getElementById('app');
  const root = reactDOM.createRoot(container);
  root.render(app);
})(React, ReactDOM, app);

/**
 * Customize map.
 * Interact with map store to customize data and behavior
 ** /
(function customize(keplerGl, store) {
  // store.dispatch(keplerGl.toggleSplitMap());
})(KeplerGl, store);
```

--------------------------------

### Navigate to the Python bindings directory

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/python/DEVELOPMENT.md

Change the current directory to the 'bindings/python' folder to begin the installation process.

```bash
cd bindings/python
```

--------------------------------

### Start Jupyter Notebook

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/kepler.gl-jupyter/README.md

Command to start a Jupyter Notebook server from the notebooks directory.

```shell
cd notebooks
jupyter notebook
```

--------------------------------

### Install kepler.gl components

Source: https://github.com/keplergl/kepler.gl/blob/master/README.md

Instructions on how to install kepler.gl modules using npm or yarn.

```sh
npm install --save @kepler.gl/components
// or
yarn add @kepler.gl/components
```

--------------------------------

### Development with Hot Reload: Watch for TypeScript changes

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/python/DEVELOPMENT.md

Start a development server that watches for changes in the TypeScript/JavaScript source files and automatically rebuilds the widget.

```bash
npm run dev
```

--------------------------------

### Install kepler.gl

Source: https://github.com/keplergl/kepler.gl/blob/master/typedoc/README.md

Instructions for installing the kepler.gl package using npm or yarn.

```sh
npm install --save kepler.gl
// or
yarn add kepler.gl
```

--------------------------------

### Provider Instance Example

Source: https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/cloud-providers/cloud-provider.md

Example of how to instantiate a Provider class with its properties.

```javascript
const myProvider = new Provider({
 name: 'foo',
 displayName: 'Foo Storage',
 icon: Icon,
 thumbnail: {width: 300, height: 200}
})
```

--------------------------------

### Install Dependencies

Source: https://github.com/keplergl/kepler.gl/blob/master/examples/custom-map-style/README.md

Installs the necessary project dependencies.

```shell
yarn
```

--------------------------------

### Install Jupyter with pip

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/kepler.gl-jupyter/README.md

Installs Jupyter and notebook using pip.

```shell
pip install jupyter
pip install notebook==6.0.1
```

--------------------------------

### receiveMapConfig Example

Source: https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/actions/actions.md

Example of how to use the receiveMapConfig action, including parsing a saved configuration.

```javascript
import {receiveMapConfig} from '@kepler.gl/actions';
import KeplerGlSchema from '@kepler.gl/schemas';

const parsedConfig = KeplerGlSchema.parseSavedConfig(config);
this.props.dispatch(receiveMapConfig(parsedConfig));
```

--------------------------------

### Production Build and Preview

Source: https://github.com/keplergl/kepler.gl/blob/master/examples/get-started-vite/README.md

Creates a production build and then previews it.

```bash
# Create production build
yarn build

# Preview production build
yarn preview
```

--------------------------------

### Building Production Docker Image

Source: https://github.com/keplergl/kepler.gl/blob/master/docker/README.md

Builds the Docker image for the production environment.

```bash
docker build -f docker/Dockerfile -t kepler-prod .
```

--------------------------------

### Building Development Docker Image

Source: https://github.com/keplergl/kepler.gl/blob/master/docker/README.md

Builds the Docker image for the development environment.

```bash
docker build -f docker/Dockerfile.dev -t kepler-dev .
```

--------------------------------

### Install Python package in development mode using pip

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/python/DEVELOPMENT.md

Install the Kepler.gl Python package in editable mode with development dependencies using 'pip'.

```bash
pip install -e ".[dev]"
```

--------------------------------

### Development Server

Source: https://github.com/keplergl/kepler.gl/blob/master/examples/get-started-vite/README.md

Starts the development server with hot module replacement.

```bash
yarn dev
```

--------------------------------

### Translation Structure Example

Source: https://github.com/keplergl/kepler.gl/blob/master/src/localization/TRANSLATION_GUIDE.md

Illustrates the nested object structure of translations before flattening.

```typescript
{
  property: {
    weight: 'weight',     // becomes 'property.weight'
    label: 'label'        // becomes 'property.label'
  },
  toolbar: {
    exportImage: 'Export Image'  // becomes 'toolbar.exportImage'
  }
}
```

--------------------------------

### Environment Variables Setup

Source: https://github.com/keplergl/kepler.gl/blob/master/examples/demo-app/README.md

Copies the template environment file and lists the required environment variables to be updated.

```sh
cp .env.template .env
MAPBOX_ACCESS_TOKEN=<your_mapbox_token>
DROPBOX_CLIENT_ID=<your_dropbox_client_id>
MAPBOX_EXPORT_TOKEN=<your_mapbox_export_token>
CARTO_CLIENT_ID=<your_carto_client_id>
FOURSQUARE_CLIENT_ID=<your_foursquare_client_id>
FOURSQUARE_DOMAIN=<your_foursquare_domain>
FOURSQUARE_USER_MAPS_URL=<your_foursquare_user_map_url>
```

--------------------------------

### Install Python package in development mode using uv

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/python/DEVELOPMENT.md

Install the Kepler.gl Python package in editable mode with development dependencies using the 'uv' package manager.

```bash
uv sync --dev
```

--------------------------------

### Register Translation in src/messages.ts

Source: https://github.com/keplergl/kepler.gl/blob/master/src/localization/TRANSLATION_GUIDE.md

Example of importing and adding the new translation to the messages object.

```typescript
import de from './translations/de';  // <-- add import

export const messages = {
  // ... existing entries
  de: flattenMessages(de)  // <-- add entry
};
```

--------------------------------

### Add Locale to src/locales.ts

Source: https://github.com/keplergl/kepler.gl/blob/master/src/localization/TRANSLATION_GUIDE.md

Example of adding a new language code and name to the LOCALES object.

```typescript
export const LOCALES = {
  en: 'English',
  // ... existing locales
  de: 'Deutsch'  // <-- add your language
};
```

--------------------------------

### GPU Filter Props Example

Source: https://github.com/keplergl/kepler.gl/blob/master/src/table/UPGRADE-data-container.md

The returned function for getGpuFilterProps now expects a data container.

```javascript
dc => (getIndex, getData) => d => {...}
```

--------------------------------

### Set Up Node.js and Yarn with NVM

Source: https://github.com/keplergl/kepler.gl/blob/master/contributing/DEVELOPERS.md

Steps to install, use, and enable the correct Node.js version and Yarn for the Kepler.gl project using nvm and corepack.

```bash
# Install the proper Node.js version for the Kepler.gl project
nvm install

# Use the downloaded Node.js version for the Kepler.gl project
nvm use

# Enable Yarn
corepack enable
```

--------------------------------

### Table Class Initialization Example

Source: https://github.com/keplergl/kepler.gl/blob/master/docs/RFC/table-class.md

Demonstrates how the new table class would be initialized using a ProtoTable and the subsequent meta data initialization.

```javascript
table.initialize(protoTable);

// following meta data should be initialized
table.allIndexes,
  table.filteredIndex,
  table.filteredIndexForDomain,
  table.fieldPairs,
  table.gpuFilter;
```

--------------------------------

### Translate Strings in New File

Source: https://github.com/keplergl/kepler.gl/blob/master/src/localization/TRANSLATION_GUIDE.md

Example of a new translation file (German) with translated string values, keeping keys unchanged.

```typescript
// src/translations/de.ts
import {LOCALES} from '../locales';

export default {
  property: {
    weight: 'Gewicht',
    label: 'Beschriftung',
    fillColor: 'Füllfarbe',
    // ... translate all entries
  },
  // ...
};
```

--------------------------------

### Model API changes in custom layers

Source: https://github.com/keplergl/kepler.gl/blob/master/docs/upgrade-guide-v3.3.md

Example of updating how to set uniforms and draw models in custom layers.

```diff
```diff
- model.setUniforms({elevationScale: 1.0});
+ model.shaderInputs.setProps({elevationScale: {elevationScale: 1.0}});
```
```

```diff
```diff
- model.draw();
+ model.draw(this.context.renderPass);
```
```

--------------------------------

### Copy .env.template

Source: https://github.com/keplergl/kepler.gl/blob/master/docker/README.md

Copies the environment template file to .env, which is required for configuration.

```bash
cp .env.template .env
```

--------------------------------

### Update example dependencies

Source: https://github.com/keplergl/kepler.gl/blob/master/contributing/DEVELOPERS.md

Command to update the kepler.gl dependency in all example folders after a new version is published.

```bash
npm run example-version
```

--------------------------------

### Installation

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/python/README.md

Install the keplergl package using pip.

```shell
pip install keplergl
```

--------------------------------

### setEditorMode Example

Source: https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/actions/actions.md

Example of how to set the map mode using the setEditorMode action. This example imports necessary functions and constants and sets the mode to DRAW_POLYGON.

```javascript
import {setEditorMode} from '@kepler.gl/actions';
import {EDITOR_MODES} from '@kepler.gl/constants';

this.props.dispatch(setEditorMode(EDITOR_MODES.DRAW_POLYGON));
```

--------------------------------

### Mount Component

Source: https://github.com/keplergl/kepler.gl/blob/master/README.md

Example of mounting the KeplerGl component.

```javascript
import KeplerGl from '@kepler.gl/components';

const Map = props => (
  <KeplerGl id="foo" width={width} mapboxApiAccessToken={token} height={height} />
);
```

--------------------------------

### Install GeoPandas with pip

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/kepler.gl-jupyter/README.md

Installs GeoPandas using pip.

```shell
pip install geopandas
```

--------------------------------

### Install GeoPandas with conda

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/kepler.gl-jupyter/README.md

Installs GeoPandas using conda.

```shell
conda install geopandas
```

--------------------------------

### Build JS module and start local server

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/kepler.gl-jupyter/README.md

Builds the JavaScript module and starts a local server to watch for changes.

```shell
npm start
```

--------------------------------

### Install keplergl

Source: https://github.com/keplergl/kepler.gl/blob/master/bindings/kepler.gl-jupyter/README.md

Installs the keplergl library using pip.

```python
!pip install keplergl
```