Use Node v6 and above, older node versions have not been tested
npm install --save kepler.gl
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.
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
.
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.
import KeplerGl from 'kepler.gl';
const Map = props => (
<KeplerGl
id="foo"
mapboxApiAccessToken={token}
width={width}
height={height}/>
);
In order to interact with a kepler.gl instance and add new data to it, you can dispatch addDataToMap
action from anywhere inside your app. It adds dataset to kepler.gl instance and update the full configuration (mapState, mapStyle, visState).
Read more about addDataToMap
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'}
}
})
);