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
  • Installation
  • Get Mapbox Token
  • Basic Usage
  • 0. Working Template
  • 1. Mount reducer
  • 2. Mount component
  • 3. Add data to map

Was this helpful?

  1. Docs
  2. API Reference

Get Started

PreviousecosystemNextAdvanced usages

Last updated 2 months ago

Was this helpful?

Installation

Use Node v18 and above, older node versions have not been tested

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

Get Mapbox Token

Kepler.gl is built on top of . A mapbox account and an access token are needed to use kepler.gl in your app. Get a at mapbox.com.

Basic Usage

Basic Usage

0. Working Template

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;

1. Mount reducer

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));

If you mount keplerGlReducer in another address instead of keplerGl, or it is not mounted at root of your reducer, you will need to specify the path to it when you mount the component with the getState prop.

2. Mount component

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

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

3. Add data to map

In order to interact with a kepler.gl instance and add new data to it, you can dispatch the addDataToMap action from anywhere inside your app. It adds dataset(s) to a kepler.gl instance and updates the full configuration (mapState, mapStyle, visState).

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'}
    }
  })
);

Check full example on .

Kepler.gl uses to manage its internal state, along with middleware to handle side effects. Mount kepler.gl reducer in your store, apply taskMiddleware.

Read more about

Github
Redux
react-palm
addDataToMap
Mapbox GL
Mapbox Access Token