Search…
Welcome
Docs
User guides
API Reference
ecosystem
Get Started
Advanced usages
Components
Reducers
Processors
Schemas
Actions
All actions
Cloud providers
Custom theme
Localization
Jupyter Notebook
Examples
Contributing
Change Log
Upgrade Guide
Powered By GitBook
All actions

Table of Contents

forwardActions

A set of helpers to forward dispatch actions to a specific instance reducer

forwardTo

Returns an action dispatcher that wraps and forwards the actions to a specific instance
Parameters
Examples
1
// action and forward dispatcher
2
import {toggleSplitMap, forwardTo} from 'kepler.gl/actions';
3
import {connect} from 'react-redux';
4
​
5
const MapContainer = props => (
6
<div>
7
<button onClick={() => props.keplerGlDispatch(toggleSplitMap())}/>
8
</div>
9
)
10
​
11
const mapDispatchToProps = (dispatch, props) => ({
12
dispatch,
13
keplerGlDispatch: forwardTo(‘foo’, dispatch)
14
});
15
​
16
export default connect(
17
state => state,
18
mapDispatchToProps
19
)(MapContainer);
Copied!

isForwardAction

Whether an action is a forward action
Parameters
  • action Object the action object
Returns boolean boolean - whether the action is a forward action

unwrap

Unwrap an action
Parameters
  • action Object the action object
Returns Object unwrapped action

wrapTo

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 argument
A forward action looks like this
1
{
2
type: "@@kepler.gl/LAYER_CONFIG_CHANGE",
3
payload: {
4
type: '@@kepler.gl/LAYER_CONFIG_CHANGE',
5
payload: {},
6
meta: {
7
// id of instance
8
_id_: id
9
// other meta
10
}
11
},
12
meta: {
13
_forward_: '@redux-forward/FORWARD',
14
_addr_: '@@KG_id'
15
}
16
};
Copied!
Parameters
  • id string The id to forward to
  • action Object the action object {type: string, payload: *}
Examples
1
import {wrapTo, togglePerspective} from 'kepler.gl/actions';
2
​
3
// This action will only dispatch to the KeplerGl instance with `id: map_1`
4
this.props.dispatch(wrapTo('map_1', togglePerspective()));
5
​
6
// You can also create a curried action for each instance
7
const wrapToMap1 = wrapTo('map_1');
8
this.props.dispatch(wrapToMap1(togglePerspective()));
Copied!

ActionTypes

Kepler.gl action types, can be listened by reducers to perform additional tasks whenever an action is called in kepler.gl
Type: Object​
Examples
1
// store.js
2
import {handleActions} from 'redux-actions';
3
import {createStore, combineReducers, applyMiddleware} from 'redux';
4
import {taskMiddleware} from 'react-palm/tasks';
5
​
6
import keplerGlReducer from 'kepler.gl/reducers';
7
import {ActionTypes} from 'kepler.gl/actions';
8
​
9
const appReducer = handleActions(
10
{
11
// listen on kepler.gl map update action to store a copy of viewport in app state
12
[ActionTypes.UPDATE_MAP]: (state, action) => ({
13
...state,
14
viewport: action.payload
15
})
16
},
17
{}
18
);
19
​
20
const reducers = combineReducers({
21
app: appReducer,
22
keplerGl: keplerGlReducer
23
});
24
​
25
export default createStore(reducers, {}, applyMiddleware(taskMiddleware));
Copied!

mapStyleActions

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.

addCustomMapStyle

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}

inputMapStyle

Input a custom map style object
Parameters
  • inputStyle Object​
    • inputStyle.url string style url e.g. 'mapbox://styles/heshan/xxxxxyyyyzzz'
    • inputStyle.id string style url e.g. 'custom_style_1'
    • inputStyle.style Object actual mapbox style json
    • inputStyle.name string style name
    • inputStyle.layerGroups Object layer groups that can be used to set map layer visibility
    • inputStyle.icon Object icon image data url
  • mapState Object mapState is optional

loadCustomMapStyle

Callback when a custom map style object is received
Parameters
  • customMapStyle Object​
    • customMapStyle.icon string​
    • customMapStyle.style Object​
    • customMapStyle.error any

loadMapStyleErr

Callback when load map style error
Parameters
  • error any

loadMapStyles

Callback when load map style success
Parameters
  • newStyles Object a {[id]: style} mapping

mapConfigChange

Update visibleLayerGroupsto change layer group visibility
Parameters
  • mapStyle Object new config {visibleLayerGroups: {label: false, road: true, background: true}}

mapStyleChange

Change to another map style. The selected style should already been loaded into mapStyle.mapStyles
Parameters
  • styleType string the style to change to

requestMapStyles

Request map style style object based on style.url.
Parameters

set3dBuildingColor

Set 3d building layer group color
Parameters

main

Main kepler.gl actions, these actions handles loading data and config into kepler.gl reducer. These actions is listened by all subreducers,

addDataToMap

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 Object​
    • data.datasets (Array<Object> | Object) *required datasets can be a dataset or an array of datasets
      Each dataset object needs to have info and data property.
      • data.datasets.info Object -info of a dataset
        • data.datasets.info.id string id of this dataset. If config is defined, id should matches the dataId in config.
        • data.datasets.info.label string A display name of this dataset
      • data.datasets.data Object *required The data object, in a tabular format with 2 properties fields and rows
        • data.datasets.data.fields Array<Object> *required Array of fields,
          • data.datasets.data.fields.name string *required Name of the field,
        • data.datasets.data.rows Array<Array> *required Array of rows, in a tabular format with fields and rows
    • data.options Object​
      • data.options.centerMap boolean default: true if centerMap is set to true kepler.gl will
        place the map view within the data points boundaries. options.centerMap will override config.mapState if passed in.
      • data.options.readOnly boolean default: false if readOnly is set to true
        the left setting panel will be hidden
      • data.options.keepExistingConfig boolean whether to keep exiting map data and associated layer filter interaction config default: false.
    • data.config Object this object will contain the full kepler.gl instance configuration {mapState, mapStyle, visState}
Examples
1
// app.js
2
import {addDataToMap} from 'kepler.gl/actions';
3
​
4
const sampleTripData = {
5
fields: [
6
{name: 'tpep_pickup_datetime', format: 'YYYY-M-D H:m:s', type: 'timestamp'},
7
{name: 'pickup_longitude', format: '', type: 'real'},
8
{name: 'pickup_latitude', format: '', type: 'real'}
9
],
10
rows: [
11
['2015-01-15 19:05:39 +00:00', -73.99389648, 40.75011063],
12
['2015-01-15 19:05:39 +00:00', -73.97642517, 40.73981094],
13
['2015-01-15 19:05:40 +00:00', -73.96870422, 40.75424576]
14
]
15
};
16
​
17
const sampleConfig = {
18
visState: {
19
filters: [
20
{
21
id: 'me',
22
dataId: 'test_trip_data',
23
name: 'tpep_pickup_datetime',
24
type: 'timeRange',
25
enlarged: true
26
}
27
]
28
}
29
};
30
​
31
this.props.dispatch(
32
addDataToMap({
33
datasets: {
34
info: {
35
label: 'Sample Taxi Trips in New York City',
36
id: 'test_trip_data'
37
},
38
data: sampleTripData
39
},
40
options: {
41
centerMap: true,
42
readOnly: false,
43
keepExistingConfig: false
44
},
45
info: {
46
title: 'Taro and Blue',
47
description: 'This is my map'
48
},
49
config: sampleConfig
50
})
51
);
Copied!

keplerGlInit

Initialize kepler.gl reducer. It is used to pass in mapboxApiAccessToken to mapStyle reducer.
Parameters
  • payload Object​
    • payload.mapboxApiAccessToken string mapboxApiAccessToken to be saved to mapStyle reducer
    • payload.mapboxApiUrl string mapboxApiUrl to be saved to mapStyle reducer.
    • payload.mapStylesReplaceDefault Boolean mapStylesReplaceDefault to be saved to mapStyle reducer

receiveMapConfig

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
  • config Object *required The Config Object
  • options Object *optional The Option object
    • options.centerMap boolean default: true if centerMap is set to true kepler.gl will
      place the map view within the data points boundaries
    • options.readOnly boolean default: false if readOnly is set to true
      the left setting panel will be hidden
    • options.keepExistingConfig boolean whether to keep exiting layer filter and interaction config default: false.
Examples
1
import {receiveMapConfig} from 'kepler.gl/actions';
2
import KeplerGlSchema from 'kepler.gl/schemas';
3
​
4
const parsedConfig = KeplerGlSchema.parseSavedConfig(config);
5
this.props.dispatch(receiveMapConfig(parsedConfig));
Copied!

resetMapConfig

Reset all sub-reducers to its initial state. This can be used to clear out all configuration in the reducer.

visStateActions

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.

addFilter

Add a new filter
Parameters
  • dataId string dataset id this new filter is associated with
Returns {type: ActionTypes.ADD_FILTER, dataId: dataId}

addLayer

Add a new layer
Parameters
Returns {type: ActionTypes.ADD_LAYER, props: props}

applyCPUFilter

Trigger CPU filter of selected dataset
Parameters
  • dataId (string | Arrary<string>) single dataId or an array of dataIds
Returns {type: ActionTypes.APPLY_CPU_FILTER, dataId: string}

enlargeFilter

Show larger time filter at bottom for time playback (apply to time filter only)
Parameters
  • idx Number index of filter to enlarge
Returns {type: ActionTypes.ENLARGE_FILTER, idx: idx}

interactionConfigChange

Update interactionConfig
Parameters
  • config Object new config as key value map: {tooltip: {enabled: true}}
Returns {type: ActionTypes.INTERACTION_CONFIG_CHANGE, config: config}

layerConfigChange

Update layer base config: dataId, label, column, isVisible
Parameters
  • oldLayer Object layer to be updated
  • newConfig Object new config
Returns {type: ActionTypes.LAYER_CONFIG_CHANGE, oldLayer: oldLayer, newConfig: newConfig}

layerTextLabelChange

Update layer text label
Parameters
  • oldLayer Object layer to be updated
  • idx Number -idx of text label to be updated
  • prop string prop of text label, e,g, anchor, alignment, color, size, field
  • value any new value

layerTypeChange

Update layer type. Previews layer config will be copied if applicable.
Parameters
Returns {type: ActionTypes.LAYER_TYPE_CHANGE, oldLayer: oldLayer, newType: newType}

layerVisConfigChange

Update layer visConfig
Parameters
  • oldLayer Object layer to be updated
  • newVisConfig Object new visConfig as a key value map: e.g. {opacity: 0.8}
Returns {type: ActionTypes.LAYER_VIS_CONFIG_CHANGE, oldLayer: oldLayer, newVisConfig: newVisConfig}

layerVisualChannelConfigChange

Update layer visual channel
Parameters
  • oldLayer Object layer to be updated
  • newConfig Object new visual channel config
  • channel string channel to be updated
Returns {type: ActionTypes.LAYER_VISUAL_CHANNEL_CHANGE, oldLayer: oldLayer, newConfig: newConfig, channel: channel}

loadFiles

Trigger file loading dispatch addDataToMap if succeed, or loadFilesErr if failed
Parameters
Returns {type: ActionTypes.LOAD_FILES, files: any}

loadFilesErr

Trigger loading file error
Parameters
  • error any
Returns {type: ActionTypes.LOAD_FILES_ERR, error: Object}

onLayerClick

Trigger layer click event with clicked object
Parameters
  • info Object Object clicked, returned by deck.gl
Returns {type: ActionTypes.LAYER_CLICK, info: info}

onLayerHover

Trigger layer hover event with hovered object
Parameters
  • info Object Object hovered, returned by deck.gl
Returns {type: ActionTypes.LAYER_HOVER, info: info}

onMapClick

Trigger map click event, unselect clicked object
Returns {type: ActionTypes.MAP_CLICK}

onMouseMove

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}

removeDataset

Remove a dataset and all layers, filters, tooltip configs that based on it
Parameters
Returns {type: ActionTypes.REMOVE_DATASET, key: key}

removeFilter

Remove a filter from visState.filters, once a filter is removed, data will be re-filtered and layer will be updated
Parameters
  • idx Number idx of filter to be removed
Returns {type: ActionTypes.REMOVE_FILTER, idx: idx}

removeLayer

Remove a layer
Parameters
  • idx Number idx of layer to be removed
Returns {type: ActionTypes.REMOVE_LAYER, idx: idx}

reorderLayer

Reorder layer, order is an array of layer indexes, index 0 will be the one at the bottom
Parameters
Examples
1
// bring `layers[1]` below `layers[0]`, the sequence layers will be rendered is `1`, `0`, `2`, `3`.
2
// `1` will be at the bottom, `3` will be at the top.
3
this.props.dispatch(reorderLayer([1, 0, 2, 3]));
Copied!
Returns {type: ActionTypes.REORDER_LAYER, order: order}

setEditorMode

Set the map mode
Parameters
  • mode string one of EDITOR_MODES
Examples
1
import {setMapMode} from 'kepler.gl/actions';
2
import {EDITOR_MODES} from 'kepler.gl/constants';
3
​
4
this.props.dispatch(setMapMode(EDITOR_MODES.DRAW_POLYGON));
Copied!

setFilter

Update filter property
Parameters
  • idx Number -idx of filter to be updated
  • prop string prop of filter, e,g, dataId, name, value
  • value any new value
  • valueIndex Number array properties like dataset require index in order to improve performance
Returns {type: ActionTypes.SET_FILTER, idx: idx, prop: prop, value: value}

setFilterPlot

Set the property of a filter plot
Parameters
  • idx Number​
  • newProp Object key value mapping of new prop {yAxis: 'histogram'}
Returns {type: ActionTypes.SET_FILTER_PLOT, idx: any, newProp: any}

setMapInfo

Set the property of a filter plot
Parameters
  • info
  • idx Number​
  • newProp Object key value mapping of new prop {yAxis: 'histogram'}
Returns {type: ActionTypes.SET_FILTER_PLOT, idx: any, newProp: any}

showDatasetTable

Display dataset table in a modal
Parameters
  • dataId string dataset id to show in table
Returns {type: ActionTypes.SHOW_DATASET_TABLE, dataId: dataId}

toggleFilterAnimation

Start and end filter animation
Parameters
Returns {type: ActionTypes.TOGGLE_FILTER_ANIMATION, idx: idx}

toggleLayerForMap

Toggle visibility of a layer in a split map
Parameters
  • mapIndex Number index of the split map
  • layerId string id of the layer
Returns {type: ActionTypes.TOGGLE_LAYER_FOR_MAP, mapIndex: any, layerId: any}

updateAnimationTime

Reset animation
Parameters