All actions
A set of helpers to forward dispatch actions to a specific instance reducer
Returns an action dispatcher that wraps and forwards the actions to a specific instance
Parameters
Examples
// action and forward dispatcher
import {toggleSplitMap, forwardTo} from 'kepler.gl/actions';
import {connect} from 'react-redux';
const MapContainer = props => (
<div>
<button onClick={() => props.keplerGlDispatch(toggleSplitMap())}/>
</div>
)
const mapDispatchToProps = (dispatch, props) => ({
dispatch,
keplerGlDispatch: forwardTo(‘foo’, dispatch)
});
export default connect(
state => state,
mapDispatchToProps
)(MapContainer);
Whether an action is a forward action
Parameters
Unwrap an action
Parameters
Wrap an action into a forward action that only modify the state of a specific kepler.gl instance. kepler.gl reducer will look for signatures in the action to determine whether it needs to be forwarded to a specific instance reducer.
wrapTo can be curried. You can create a curried action wrapper by only supply the
id
argumentA forward action looks like this
{
type: "@@kepler.gl/LAYER_CONFIG_CHANGE",
payload: {
type: '@@kepler.gl/LAYER_CONFIG_CHANGE',
payload: {},
meta: {
// id of instance
_id_: id
// other meta
}
},
meta: {
_forward_: '@redux-forward/FORWARD',
_addr_: '@@KG_id'
}
};
Parameters
Examples
import {wrapTo, togglePerspective} from 'kepler.gl/actions';
// This action will only dispatch to the KeplerGl instance with `id: map_1`
this.props.dispatch(wrapTo('map_1', togglePerspective()));
// You can also create a curried action for each instance
const wrapToMap1 = wrapTo('map_1');
this.props.dispatch(wrapToMap1(togglePerspective()));
Kepler.gl action types, can be listened by reducers to perform additional tasks whenever an action is called in kepler.gl
Examples
// store.js
import {handleActions} from 'redux-actions';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import {taskMiddleware} from 'react-palm/tasks';
import keplerGlReducer from 'kepler.gl/reducers';
import {ActionTypes} from 'kepler.gl/actions';
const appReducer = handleActions(
{
// listen on kepler.gl map update action to store a copy of viewport in app state
[ActionTypes.UPDATE_MAP]: (state, action) => ({
...state,
viewport: action.payload
})
},
{}
);
const reducers = combineReducers({
app: appReducer,
keplerGl: keplerGlReducer
});
export default createStore(reducers, {}, applyMiddleware(taskMiddleware));
Actions handled mostly by
mapStyle
reducer. They manage the display of base map, such as loading and receiving base map styles, hiding and showing map layers, user input of custom map style url.Add map style from user input to reducer and set it to current style This action is called when user click confirm after putting in a valid style url in the custom map style dialog. It should not be called from outside kepler.gl without a valid
inputStyle
in the mapStyle
reducer. param {void}Input a custom map style object
Parameters
Callback when a custom map style object is received
Parameters
Callback when load map style error
Parameters
error
any
Callback when load map style success
Parameters
Update
visibleLayerGroups
to change layer group visibilityParameters
Change to another map style. The selected style should already been loaded into
mapStyle.mapStyles
Parameters
Request map style style object based on style.url.
Parameters
Set 3d building layer group color
Parameters
Main kepler.gl actions, these actions handles loading data and config into kepler.gl reducer. These actions is listened by all subreducers,
Add data to kepler.gl reducer, prepare map with preset configuration if config is passed. Kepler.gl provides a handy set of utils to parse data from different formats to the
data
object required in dataset. You rarely need to manually format the data obejct.Use
KeplerGlSchema.getConfigToSave
to generate a json blob of the currents instance config. The config object value will always have higher precedence than the options properties.Kepler.gl uses
dataId
in the config to match with loaded dataset. If you pass a config object, you need to match the info.id
of your dataset to the dataId
in each layer
, filter
and interactionConfig.tooltips.fieldsToShow
Parameters
data.datasets.data
Object *required The data object, in a tabular format with 2 propertiesfields
androws
data.options.centerMap
booleandefault: true
ifcenterMap
is set totrue
kepler.gl will place the map view within the data points boundaries.options.centerMap
will overrideconfig.mapState
if passed in.data.options.readOnly
booleandefault: false
ifreadOnly
is set totrue
the left setting panel will be hiddendata.options.keepExistingConfig
boolean whether to keep exiting map data and associated layer filter interaction configdefault: false
.
data.config
Object this object will contain the full kepler.gl instance configuration {mapState, mapStyle, visState}
Examples
// app.js
import {addDataToMap} from 'kepler.gl/actions';
const sampleTripData = {
fields: [
{name: 'tpep_pickup_datetime', format: 'YYYY-M-D H:m:s', type: 'timestamp'},
{name: 'pickup_longitude', format: '', type: 'real'},
{name: 'pickup_latitude', format: '', type: 'real'}
],
rows: [
['2015-01-15 19:05:39 +00:00', -73.99389648, 40.75011063],
['2015-01-15 19:05:39 +00:00', -73.97642517, 40.73981094],
['2015-01-15 19:05:40 +00:00', -73.96870422, 40.75424576]
]
};
const sampleConfig = {
visState: {
filters: [
{
id: 'me',
dataId: 'test_trip_data',
name: 'tpep_pickup_datetime',
type: 'timeRange',
view: 'enlarged'
}
]
}
};
this.props.dispatch(
addDataToMap({
datasets: {
info: {
label: 'Sample Taxi Trips in New York City',
id: 'test_trip_data'
},
data: sampleTripData
},
options: {
centerMap: true,
readOnly: false,
keepExistingConfig: false
},
info: {
title: 'Taro and Blue',
description: 'This is my map'
},
config: sampleConfig
})
);
Initialize kepler.gl reducer. It is used to pass in
mapboxApiAccessToken
to mapStyle
reducer.Parameters
Pass config to kepler.gl instance, prepare the state with preset configs. Calling
KeplerGlSchema.parseSavedConfig
to convert saved config before passing it in is required.You can call
receiveMapConfig
before passing in any data. The reducer will store layer and filter config, waiting for data to come in. When data arrives, you can call addDataToMap
without passing any config, and the reducer will try to match preloaded configs. This behavior is designed to allow asynchronous data loading.It is also useful when you want to prepare the kepler.gl instance with some preset layer and filter settings. Note Sequence is important,
receiveMapConfig
needs to be called before data is loaded. Currently kepler.gl doesn't allow calling receiveMapConfig
after data is loaded. It will reset current configuration first then apply config to it.Parameters
options.centerMap
booleandefault: true
ifcenterMap
is set totrue
kepler.gl will place the map view within the data points boundariesoptions.readOnly
booleandefault: false
ifreadOnly
is set totrue
the left setting panel will be hiddenoptions.keepExistingConfig
boolean whether to keep exiting layer filter and interaction configdefault: false
.
Examples
import {receiveMapConfig} from 'kepler.gl/actions';
import KeplerGlSchema from 'kepler.gl/schemas';
const parsedConfig = KeplerGlSchema.parseSavedConfig(config);
this.props.dispatch(receiveMapConfig(parsedConfig));
Reset all sub-reducers to its initial state. This can be used to clear out all configuration in the reducer.
Actions handled mostly by
visState
reducer. They manage how data is processed, filtered and displayed on the map by operates on layers, filters and interaction settings.Add a new filter
Parameters
Returns {type: ActionTypes.ADD_FILTER, dataId: dataId}
Add a new layer
Parameters
Returns {type: ActionTypes.ADD_LAYER, props: props}
Trigger CPU filter of selected dataset
Parameters
Show larger time filter at bottom for time playback (apply to time filter only)
Parameters
Returns {type: ActionTypes.ENLARGE_FILTER, idx: idx}
Update
interactionConfig
Parameters
Returns {type: ActionTypes.INTERACTION_CONFIG_CHANGE, config: config}
Update layer base config: dataId, label, column, isVisible
Parameters
Returns {type: ActionTypes.LAYER_CONFIG_CHANGE, oldLayer: oldLayer, newConfig: newConfig}
Update layer text label
Parameters
Update layer type. Previews layer config will be copied if applicable.
Parameters
Returns {type: ActionTypes.LAYER_TYPE_CHANGE, oldLayer: oldLayer, newType: newType}
Update layer
visConfig
Parameters
Returns {type: ActionTypes.LAYER_VIS_CONFIG_CHANGE, oldLayer: oldLayer, newVisConfig: newVisConfig}
Update layer visual channel
Parameters
Returns {type: ActionTypes.LAYER_VISUAL_CHANNEL_CHANGE, oldLayer: oldLayer, newConfig: newConfig, channel: channel}
Trigger file loading dispatch
addDataToMap
if succeed, or loadFilesErr
if failedParameters
Returns {type: ActionTypes.LOAD_FILES, files: any}
Trigger loading file error
Parameters
error
any
Trigger layer click event with clicked object
Parameters
Returns {type: ActionTypes.LAYER_CLICK, info: info}
Trigger layer hover event with hovered object
Parameters
Returns {type: ActionTypes.LAYER_HOVER, info: info}
Trigger map click event, unselect clicked object
Returns {type: ActionTypes.MAP_CLICK}
Trigger map mouse moveevent, payload would be React-map-gl PointerEvent https://uber.github.io/react-map-gl/#/documentation/api-reference/pointer-event
Parameters
Returns {type: ActionTypes.MAP_CLICK}
Remove a dataset and all layers, filters, tooltip configs that based on it