Get Started
Installation
Use Node v6 and above, older node versions have not been tested
1
npm install --save kepler.gl
Copied!
Get Mapbox Token
Kepler.gl is built on top of Mapbox GL. A mapbox account and an access token are needed to use kepler.gl in your app. Get a Mapbox Access Token at mapbox.com.
Basic Usage
1. Mount reducer
Kepler.gl uses Redux to manage its internal state, along with react-palm middleware to handle side effects. Mount kepler.gl reducer in your store, apply
taskMiddleware.1
import keplerGlReducer from 'kepler.gl/reducers';
2
import {createStore, combineReducers, applyMiddleware} from 'redux';
3
import {taskMiddleware} from 'react-palm/tasks';
4
​
5
const reducer = combineReducers({
6
// <-- mount kepler.gl reducer in your app
7
keplerGl: keplerGlReducer,
8
​
9
// Your other reducers here
10
app: appReducer
11
});
12
​
13
// create store
14
const store = createStore(reducer, {}, applyMiddleware(taskMiddleware));
Copied!
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
1
import KeplerGl from 'kepler.gl';
2
​
3
const Map = props => (
4
<KeplerGl
5
id="foo"
6
mapboxApiAccessToken={token}
7
width={width}
8
height={height}/>
9
);
Copied!
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).1
import {addDataToMap} from 'kepler.gl/actions';
2
​
3
this.props.dispatch(
4
addDataToMap({
5
// datasets
6
datasets: {
7
info: {
8
label: 'Sample Taxi Trips in New York City',
9
id: 'test_trip_data'
10
},
11
data: sampleTripData
12
},
13
// option
14
option: {
15
centerMap: true,
16
readOnly: false
17
},
18
// config
19
config: {
20
mapStyle: {styleType: 'light'}
21
}
22
})
23
);
Copied!
Last modified 1yr ago