- forwardActions
- ActionTypes
- mapStyleActions
- main
- visStateActions
- addFilter
- addLayer
- applyCPUFilter
- enlargeFilter
- interactionConfigChange
- layerConfigChange
- layerTextLabelChange
- layerTypeChange
- layerVisConfigChange
- layerVisualChannelConfigChange
- loadFiles
- loadFilesErr
- onLayerClick
- onLayerHover
- onMapClick
- onMouseMove
- removeDataset
- removeFilter
- removeLayer
- reorderLayer
- setEditorMode
- setFilter
- setFilterPlot
- setMapInfo
- showDatasetTable
- toggleFilterAnimation
- toggleLayerForMap
- updateAnimationTime
- updateFilterAnimationSpeed
- updateLayerAnimationSpeed
- updateLayerBlending
- updateVisData
- uiStateActions
- addNotification
- cleanupExportImage
- hideExportDropdown
- openDeleteModal
- removeNotification
- setExportData
- setExportDataType
- setExportFiltered
- setExportImageDataUri
- setExportImageSetting
- setExportSelectedDataset
- setUserMapboxAccessToken
- showExportDropdown
- startExportingImage
- toggleMapControl
- toggleModal
- toggleSidePanel
- rootActions
- mapStateActions
- layerColorUIChange
- setExportMapFormat
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
action
Object the action object
Returns boolean boolean - whether the action is a forward action
Unwrap an action
Parameters
action
Object the action object
Returns Object unwrapped action
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
{
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
Type: Object
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}
- ActionTypes:
ActionTypes.ADD_CUSTOM_MAP_STYLE
- Updaters:
mapStyleUpdaters.addCustomMapStyleUpdater
Input a custom map style object
- ActionTypes:
ActionTypes.INPUT_MAP_STYLE
- Updaters:
mapStyleUpdaters.inputMapStyleUpdater
Parameters
inputStyle
ObjectinputStyle.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 jsoninputStyle.name
string style nameinputStyle.layerGroups
Object layer groups that can be used to set map layer visibilityinputStyle.icon
Object icon image data url
mapState
Object mapState is optional
Callback when a custom map style object is received
- ActionTypes:
ActionTypes.LOAD_CUSTOM_MAP_STYLE
- Updaters:
mapStyleUpdaters.loadCustomMapStyleUpdater
Parameters
customMapStyle
Object
Callback when load map style error
- ActionTypes:
ActionTypes.LOAD_MAP_STYLE_ERR
- Updaters:
mapStyleUpdaters.loadMapStyleErrUpdater
Parameters
error
any
Callback when load map style success
- ActionTypes:
ActionTypes.LOAD_MAP_STYLES
- Updaters:
mapStyleUpdaters.loadMapStylesUpdater
Parameters
newStyles
Object a{[id]: style}
mapping
Update visibleLayerGroups
to change layer group visibility
- ActionTypes:
ActionTypes.MAP_CONFIG_CHANGE
- Updaters:
mapStyleUpdaters.mapConfigChangeUpdater
Parameters
mapStyle
Object new config{visibleLayerGroups: {label: false, road: true, background: true}}
Change to another map style. The selected style should already been loaded into mapStyle.mapStyles
- ActionTypes:
ActionTypes.MAP_STYLE_CHANGE
- Updaters:
mapStyleUpdaters.mapStyleChangeUpdater
Parameters
styleType
string the style to change to
Request map style style object based on style.url.
- ActionTypes:
ActionTypes.REQUEST_MAP_STYLES
- Updaters:
mapStyleUpdaters.requestMapStylesUpdater
Parameters
Set 3d building layer group color
- ActionTypes:
ActionTypes.SET_3D_BUILDING_COLOR
- Updaters:
mapStyleUpdaters.set3dBuildingColorUpdater
Parameters
color
Array [r, g, b]
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
- ActionTypes:
ActionTypes.ADD_DATA_TO_MAP
- Updaters:
combinedUpdaters.addDataToMapUpdater
Parameters
data
Objectdata.datasets
(Array<Object> | Object) *required datasets can be a dataset or an array of datasets Each dataset object needs to haveinfo
anddata
property.data.options
Objectdata.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.
- ActionTypes:
ActionTypes.INIT
- Updaters:
mapStyleUpdaters.initMapStyleUpdater
Parameters
payload
Object
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.
- ActionTypes:
ActionTypes.RECEIVE_MAP_CONFIG
- Updaters:
mapStateUpdaters.receiveMapConfigUpdater
,mapStyleUpdaters.receiveMapConfigUpdater
,visStateUpdaters.receiveMapConfigUpdater
Parameters
config
Object *required The Config Objectoptions
Object *optional The Option objectoptions.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.
- ActionTypes:
ActionTypes.RESET_MAP_CONFIG
- Updaters:
mapStateUpdaters.resetMapConfigUpdater
,mapStyleUpdaters.resetMapConfigMapStyleUpdater
,mapStyleUpdaters.resetMapConfigMapStyleUpdater
,visStateUpdaters.resetMapConfigUpdater
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
- ActionTypes:
ActionTypes.ADD_FILTER
- Updaters:
visStateUpdaters.addFilterUpdater
Parameters
dataId
string datasetid
this new filter is associated with
Returns {type: ActionTypes.ADD_FILTER, dataId: dataId}
Add a new layer
- ActionTypes:
ActionTypes.ADD_LAYER
- Updaters:
visStateUpdaters.addLayerUpdater
Parameters
props
Object new layer props
Returns {type: ActionTypes.ADD_LAYER, props: props}
Trigger CPU filter of selected dataset
- ActionTypes:
ActionTypes.APPLY_CPU_FILTER
- Updaters:
visStateUpdaters.applyCPUFilterUpdater
Parameters
Returns {type: ActionTypes.APPLY_CPU_FILTER, dataId: string}
Show larger time filter at bottom for time playback (apply to time filter only)
- ActionTypes:
ActionTypes.ENLARGE_FILTER
- Updaters:
visStateUpdaters.enlargeFilterUpdater
Parameters
idx
Number index of filter to enlarge
Returns {type: ActionTypes.ENLARGE_FILTER, idx: idx}
Update interactionConfig
- ActionTypes:
ActionTypes.INTERACTION_CONFIG_CHANGE
- Updaters:
visStateUpdaters.interactionConfigChangeUpdater
Parameters
config
Object new config as key value map:{tooltip: {enabled: true}}
Returns {type: ActionTypes.INTERACTION_CONFIG_CHANGE, config: config}
Update layer base config: dataId, label, column, isVisible
- ActionTypes:
ActionTypes.LAYER_CONFIG_CHANGE
- Updaters:
visStateUpdaters.layerConfigChangeUpdater
Parameters
Returns {type: ActionTypes.LAYER_CONFIG_CHANGE, oldLayer: oldLayer, newConfig: newConfig}
Update layer text label
- ActionTypes:
ActionTypes.LAYER_TEXT_LABEL_CHANGE
- Updaters:
visStateUpdaters.layerTextLabelChangeUpdater
Parameters
oldLayer
Object layer to be updatedidx
Number -idx
of text label to be updatedprop
stringprop
of text label, e,g,anchor
,alignment
,color
,size
,field
value
any new value
Update layer type. Previews layer config will be copied if applicable.
- ActionTypes:
ActionTypes.LAYER_TYPE_CHANGE
- Updaters:
visStateUpdaters.layerTypeChangeUpdater
Parameters
Returns {type: ActionTypes.LAYER_TYPE_CHANGE, oldLayer: oldLayer, newType: newType}
Update layer visConfig
- ActionTypes:
ActionTypes.LAYER_VIS_CONFIG_CHANGE
- Updaters:
visStateUpdaters.layerVisConfigChangeUpdater
Parameters
oldLayer
Object layer to be updatednewVisConfig
Object new visConfig as a key value map: e.g.{opacity: 0.8}
Returns {type: ActionTypes.LAYER_VIS_CONFIG_CHANGE, oldLayer: oldLayer, newVisConfig: newVisConfig}
Update layer visual channel
- ActionTypes:
ActionTypes.LAYER_VISUAL_CHANNEL_CHANGE
- Updaters:
visStateUpdaters.layerVisualChannelChangeUpdater
Parameters
oldLayer
Object layer to be updatednewConfig
Object new visual channel configchannel
string channel to be updated
Returns {type: ActionTypes.LAYER_VISUAL_CHANNEL_CHANGE, oldLayer: oldLayer, newConfig: newConfig, channel: channel}
Trigger file loading dispatch addDataToMap
if succeed, or loadFilesErr
if failed
- ActionTypes:
ActionTypes.LOAD_FILES
- Updaters:
uiStateUpdaters.loadFilesUpdater
,visStateUpdaters.loadFilesUpdater
Parameters
Returns {type: ActionTypes.LOAD_FILES, files: any}
Trigger loading file error
- ActionTypes:
ActionTypes.LOAD_FILES_ERR
- Updaters:
uiStateUpdaters.loadFilesErrUpdater
,visStateUpdaters.loadFilesErrUpdater
Parameters
error
any
Returns {type: ActionTypes.LOAD_FILES_ERR, error: Object}
Trigger layer click event with clicked object
- ActionTypes:
ActionTypes.LAYER_CLICK
- Updaters:
visStateUpdaters.layerClickUpdater
Parameters
info
Object Object clicked, returned by deck.gl
Returns {type: ActionTypes.LAYER_CLICK, info: info}
Trigger layer hover event with hovered object
- ActionTypes:
ActionTypes.LAYER_HOVER
- Updaters:
visStateUpdaters.layerHoverUpdater
Parameters
info
Object Object hovered, returned by deck.gl
Returns {type: ActionTypes.LAYER_HOVER, info: info}
Trigger map click event, unselect clicked object
- ActionTypes:
ActionTypes.MAP_CLICK
- Updaters:
visStateUpdaters.mapClickUpdater
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
- ActionTypes:
ActionTypes.MOUSE_MOVE
- Updaters:
visStateUpdaters.mouseMoveUpdater
Parameters
evt
Object PointerEvent
Returns {type: ActionTypes.MAP_CLICK}
Remove a dataset and all layers, filters, tooltip configs that based on it
- ActionTypes:
ActionTypes.REMOVE_DATASET
- Updaters:
visStateUpdaters.removeDatasetUpdater
Parameters
key
string dataset id
Returns {type: ActionTypes.REMOVE_DATASET, key: key}
Remove a filter from visState.filters
, once a filter is removed, data will be re-filtered and layer will be updated
- ActionTypes:
ActionTypes.REMOVE_FILTER
- Updaters:
visStateUpdaters.removeFilterUpdater
Parameters
idx
Number idx of filter to be removed
Returns {type: ActionTypes.REMOVE_FILTER, idx: idx}
Remove a layer
- ActionTypes:
ActionTypes.REMOVE_LAYER
- Updaters:
visStateUpdaters.removeLayerUpdater
Parameters
idx
Number idx of layer to be removed
Returns {type: ActionTypes.REMOVE_LAYER, idx: idx}
Reorder layer, order is an array of layer indexes, index 0 will be the one at the bottom
- ActionTypes:
ActionTypes.REORDER_LAYER
- Updaters:
visStateUpdaters.reorderLayerUpdater
Parameters
Examples
// bring `layers[1]` below `layers[0]`, the sequence layers will be rendered is `1`, `0`, `2`, `3`.
// `1` will be at the bottom, `3` will be at the top.
this.props.dispatch(reorderLayer([1, 0, 2, 3]));
Returns {type: ActionTypes.REORDER_LAYER, order: order}
Set the map mode
- ActionTypes:
ActionTypes.SET_EDITOR_MODE
- Updaters:
visStateUpdaters.setEditorModeUpdater
Parameters
mode
string one of EDITOR_MODES
Examples
import {setMapMode} from 'kepler.gl/actions';
import {EDITOR_MODES} from 'kepler.gl/constants';
this.props.dispatch(setMapMode(EDITOR_MODES.DRAW_POLYGON));
Update filter property
- ActionTypes:
ActionTypes.SET_FILTER
- Updaters:
visStateUpdaters.setFilterUpdater
Parameters
idx
Number -idx
of filter to be updatedprop
stringprop
of filter, e,g,dataId
,name
,value
value
any new valuevalueIndex
Number array properties like dataset require index in order to improve performance
Returns {type: ActionTypes.SET_FILTER, idx: idx, prop: prop, value: value}
Set the property of a filter plot
- ActionTypes:
ActionTypes.SET_FILTER_PLOT
- Updaters:
visStateUpdaters.setFilterPlotUpdater
Parameters
Returns {type: ActionTypes.SET_FILTER_PLOT, idx: any, newProp: any}
Set the property of a filter plot
- ActionTypes:
ActionTypes.SET_MAP_INFO
- Updaters:
visStateUpdaters.setMapInfoUpdater
Parameters
Returns {type: ActionTypes.SET_FILTER_PLOT, idx: any, newProp: any}
Display dataset table in a modal
- ActionTypes:
ActionTypes.SHOW_DATASET_TABLE
- Updaters:
visStateUpdaters.showDatasetTableUpdater
Parameters
dataId
string dataset id to show in table
Returns {type: ActionTypes.SHOW_DATASET_TABLE, dataId: dataId}
Start and end filter animation
- ActionTypes:
ActionTypes.TOGGLE_FILTER_ANIMATION
- Updaters:
visStateUpdaters.toggleFilterAnimationUpdater
Parameters
idx
Number idx of filter
Returns {type: ActionTypes.TOGGLE_FILTER_ANIMATION, idx: idx}
Toggle visibility of a layer in a split map
- ActionTypes:
ActionTypes.TOGGLE_LAYER_FOR_MAP
- Updaters:
visStateUpdaters.toggleLayerForMapUpdater
Parameters
Returns {type: ActionTypes.TOGGLE_LAYER_FOR_MAP, mapIndex: any, layerId: any}
Reset animation
- ActionTypes:
ActionTypes.UPDATE_ANIMATION_TIME
- Updaters:
visStateUpdaters.updateAnimationTimeUpdater
Parameters
value
Number Current value of the slider
Returns {type: ActionTypes.UPDATE_ANIMATION_TIME, value: value}
Change filter animation speed
- ActionTypes:
ActionTypes.UPDATE_FILTER_ANIMATION_SPEED
- Updaters:
visStateUpdaters.updateFilterAnimationSpeedUpdater
Parameters
Returns {type: ActionTypes.UPDATE_FILTER_ANIMATION_SPEED, idx: idx, speed: speed}
update trip layer animation speed
- ActionTypes:
ActionTypes.UPDATE_LAYER_ANIMATION_SPEED
- Updaters:
visStateUpdaters.updateLayerAnimationSpeedUpdater
Parameters
speed
Numberspeed
to change it to.speed
is a multiplier
Returns {type: ActionTypes.UPDATE_LAYER_ANIMATION_SPEED, speed: speed}
Update layer blending mode
- ActionTypes:
ActionTypes.UPDATE_LAYER_BLENDING
- Updaters:
visStateUpdaters.updateLayerBlendingUpdater
Parameters
mode
string one ofadditive
,normal
andsubtractive
Returns {type: ActionTypes.UPDATE_LAYER_BLENDING, mode: mode}
Add new dataset to visState
, with option to load a map config along with the datasets
- ActionTypes:
ActionTypes.UPDATE_VIS_DATA
- Updaters:
visStateUpdaters.updateVisDataUpdater
Parameters
datasets
(Array<Object> | Object) *required datasets can be a dataset or an array of datasets Each dataset object needs to haveinfo
anddata
property.options
Objectconfig
Object this object will contain the full kepler.gl instance configuration {mapState, mapStyle, visState}
Returns {type: ActionTypes.UPDATE_VIS_DATA, datasets: datasets, options: options, config: config}
Actions handled mostly by uiState
reducer.
They manage UI changes in tha app, such as open and close side panel,
switch between tabs in the side panel, open and close modal dialog for exporting data / images etc.
It also manges which settings are selected during image and map export
Add a notification to be displayed. Existing notification is going to be updated in case of matching ids.
- ActionTypes:
ActionTypes.ADD_NOTIFICATION
- Updaters:
uiStateUpdaters.addNotificationUpdater
Parameters
notification
Object Thenotification
object to be added
Delete cached export image
- ActionTypes:
ActionTypes.CLEANUP_EXPORT_IMAGE
- Updaters:
uiStateUpdaters.cleanupExportImage
Hide side panel header dropdown, activated by clicking the share link on top of the side panel
- ActionTypes:
ActionTypes.HIDE_EXPORT_DROPDOWN
- Updaters:
uiStateUpdaters.hideExportDropdownUpdater
Toggle active map control panel
- ActionTypes:
ActionTypes.OPEN_DELETE_MODAL
- Updaters:
uiStateUpdaters.openDeleteModalUpdater
Parameters
datasetId
stringid
of the dataset to be deleted
Remove a notification
- ActionTypes:
ActionTypes.REMOVE_NOTIFICATION
- Updaters:
uiStateUpdaters.removeNotificationUpdater
Parameters
id
stringid
of the notification to be removed
Whether to including data in map config, toggle between true
or false
- ActionTypes:
ActionTypes.SET_EXPORT_DATA
- Updaters:
uiStateUpdaters.setExportDataUpdater
Set data format for exporting data
- ActionTypes:
ActionTypes.SET_EXPORT_DATA_TYPE
- Updaters:
uiStateUpdaters.setExportDataTypeUpdater
Parameters
dataType
string one of'text/csv'
Whether to export filtered data, true
or false
- ActionTypes:
ActionTypes.SET_EXPORT_FILTERED
- Updaters:
uiStateUpdaters.setExportFilteredUpdater
Parameters
payload
boolean settrue
to ony export filtered data
Set exportImage.setExportImageDataUri
to a dataUri
- ActionTypes:
ActionTypes.SET_EXPORT_IMAGE_DATA_URI
- Updaters:
uiStateUpdaters.setExportImageDataUri
Parameters
dataUri
string export image data uri
Set exportImage
settings: ratio, resolution, legend
- ActionTypes:
ActionTypes.SET_EXPORT_IMAGE_SETTING
- Updaters:
uiStateUpdaters.setExportImageSetting
Parameters
newSetting
Object {ratio: '1x'}
Set selected dataset for export
- ActionTypes:
ActionTypes.SET_EXPORT_SELECTED_DATASET
- Updaters:
uiStateUpdaters.setExportSelectedDatasetUpdater
Parameters
datasetId
string dataset id
Whether we export a mapbox access token used to create a single map html file
- ActionTypes:
ActionTypes.SET_USER_MAPBOX_ACCESS_TOKEN
- Updaters:
uiStateUpdaters.setUserMapboxAccessTokenUpdater
Parameters
payload
string mapbox access token
Hide and show side panel header dropdown, activated by clicking the share link on top of the side panel
- ActionTypes:
ActionTypes.SHOW_EXPORT_DROPDOWN
- Updaters:
uiStateUpdaters.showExportDropdownUpdater
Parameters
id
string id of the dropdown
Set exportImage.exporting
to true
- ActionTypes:
ActionTypes.START_EXPORTING_IMAGE
- Updaters:
uiStateUpdaters.startExportingImage
Toggle active map control panel
- ActionTypes:
ActionTypes.TOGGLE_MAP_CONTROL
- Updaters:
uiStateUpdaters.toggleMapControlUpdater
Parameters
panelId
string map control panel id, one of the keys of:DEFAULT_MAP_CONTROLS
Show and hide modal dialog
- ActionTypes:
ActionTypes.TOGGLE_MODAL
- Updaters:
uiStateUpdaters.toggleModalUpdater
Parameters
id
(string | null) id of modal to be shown, null to hide modals. One of:-DATA_TABLE_ID
Toggle active side panel
- ActionTypes:
ActionTypes.TOGGLE_SIDE_PANEL
- Updaters:
uiStateUpdaters.toggleSidePanelUpdater
Parameters
id
string id of side panel to be shown, one oflayer
,filter
,interaction
,map
Root actions managers adding and removing instances in root reducer.
Under-the-hood, when a KeplerGl
component is mounted or unmounted,
it will automatically calls these actions to add itself to the root reducer.
However, sometimes the data is ready before the component is registered in the reducer,
in this case, you can manually call these actions or the corresponding updater to add it to the reducer.
Delete an instance from keplerGlReducer
. This action is called under-the-hood when a KeplerGl
component is un-mounted to the dom.
If mint
is set to be true
in the component prop, the instance state will be deleted from the root reducer. Otherwise, the root reducer will keep
the instance state and later transfer it to a newly mounted component with the same id
- ActionTypes:
ActionTypes.DELETE_ENTRY
- Updaters:
Parameters
id
string the id of the instance to be deleted
Add a new kepler.gl instance in keplerGlReducer
. This action is called under-the-hood when a KeplerGl
component is mounted to the dom.
Note that if you dispatch actions such as adding data to a kepler.gl instance before the React component is mounted, the action will not be
performed. Instance reducer can only handle actions when it is instantiated.
- ActionTypes:
ActionTypes.REGISTER_ENTRY
- Updaters:
Parameters
payload
Objectpayload.id
string *required The id of the instancepayload.mint
boolean Whether to use a fresh empty state, whenmint: true
it will always load a fresh state when the component is re-mounted. Whenmint: false
it will register with existing instance state under the sameid
, when the component is unmounted then mounted again. Default:true
payload.mapboxApiAccessToken
string mapboxApiAccessToken to be saved inmap-style
reducer.payload.mapboxApiUrl
string mapboxApiUrl to be saved inmap-style
reducer.payload.mapStylesReplaceDefault
Boolean mapStylesReplaceDefault to be saved inmap-style
reducer.
Rename an instance in the root reducer, keep its entire state
- ActionTypes:
ActionTypes.RENAME_ENTRY
- Updaters:
Parameters
Actions handled mostly by mapState
reducer.
They manage map viewport update, toggle between 2d and 3d map,
toggle between single and split maps.
Fit map viewport to bounds
- ActionTypes:
ActionTypes.FIT_BOUNDS
- Updaters:
mapStateUpdaters.fitBoundsUpdater
Parameters
Examples
import {fitBounds} from 'kepler.gl/actions';
this.props.dispatch(fitBounds([-122.23, 37.127, -122.11, 37.456]));
Toggle between 3d and 2d map.
- ActionTypes:
ActionTypes.TOGGLE_PERSPECTIVE
- Updaters:
mapStateUpdaters.togglePerspectiveUpdater
Examples
import {togglePerspective} from 'kepler.gl/actions';
this.props.dispatch(togglePerspective());
Toggle between single map or split maps
- ActionTypes:
ActionTypes.TOGGLE_SPLIT_MAP
- Updaters:
mapStateUpdaters.toggleSplitMapUpdater
,uiStateUpdaters.toggleSplitMapUpdater
,visStateUpdaters.toggleSplitMapUpdater
Parameters
index
Number? index is provided, close split map at index
Examples
import {toggleSplitMap} from 'kepler.gl/actions';
this.props.dispatch(toggleSplitMap());
Update map viewport
- ActionTypes:
ActionTypes.UPDATE_MAP
- Updaters:
mapStateUpdaters.updateMapUpdater
Parameters
viewport
Object viewport object container one or any of these propertieswidth
,height
,latitude
longitude
,zoom
,pitch
,bearing
,dragRotate
viewport.width
Number? Width of viewportviewport.height
Number? Height of viewportviewport.zoom
Number? Zoom of viewportviewport.pitch
Number? Camera angle in degrees (0 is straight down)viewport.bearing
Number? Map rotation in degrees (0 means north is up)viewport.latitude
Number? Latitude center of viewport on map in mercator projectionviewport.longitude
Number? Longitude Center of viewport on map in mercator projectionviewport.dragRotate
boolean? Whether to enable drag and rotate map into perspective viewport
Examples
import {updateMap} from 'kepler.gl/actions';
this.props.dispatch(
updateMap({latitude: 37.75043, longitude: -122.34679, width: 800, height: 1200})
);
Set the color palette ui for layer color
- ActionTypes:
ActionTypes.LAYER_COLOR_UI_CHANGE
- Updaters:
visStateUpdaters.layerColorUIChangeUpdater
Parameters
Set the export map format (html, json)
- ActionTypes:
ActionTypes.SET_EXPORT_MAP_FORMAT
- Updaters:
uiStateUpdaters.setExportMapFormatUpdater
Parameters
payload
string map format