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 dispatcherimport {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 instanceconst 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.jsimport {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
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
Callback when a custom map style object is received
ActionTypes: ActionTypes.LOAD_CUSTOM_MAP_STYLE
Updaters: mapStyleUpdaters.loadCustomMapStyleUpdater
Parameters
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
Object
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
// app.jsimport {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',enlarged: true}]}}this.props.dispatch(addDataToMap({datasets: {info: {label: 'Sample Taxi Trips in New York City',id: 'test_trip_data'},data: sampleTripData},option: {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
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
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
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
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 dataset id
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
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 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
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 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}
Update layer visual channel
ActionTypes: ActionTypes.LAYER_VISUAL_CHANNEL_CHANGE
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}
Trigger file loading dispatch addDataToMap
if succeed, or loadFilesErr
if failed
ActionTypes: ActionTypes.LOAD_FILES
Parameters
Returns {type: ActionTypes.LOAD_FILES, files: any}
Trigger loading file error
ActionTypes: ActionTypes.LOAD_FILES_ERR
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 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}
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
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
Parameters
Returns {type: ActionTypes.UPDATE_FILTER_ANIMATION_SPEED, idx: idx, speed: speed}
update trip layer animation speed
ActionTypes: ActionTypes.UPDATE_LAYER_ANIMATION_SPEED
Parameters
speed
Number speed
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 of additive
, normal
and subtractive
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
config
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 The notification
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
string id
of the dataset to be deleted
Remove a notification
ActionTypes: ActionTypes.REMOVE_NOTIFICATION
Updaters: uiStateUpdaters.removeNotificationUpdater
Parameters
id
string id
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 set true
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
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
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 of layer
, 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
Object
payload.id
string *required The id of the instance
payload.mint
boolean Whether to use a fresh empty state, when mint: true
it will always load a fresh state when the component is re-mounted.
When mint: false
it will register with existing instance state under the same id
, when the component is unmounted then mounted again. Default: true
payload.mapboxApiAccessToken
string mapboxApiAccessToken to be saved in map-style
reducer.
payload.mapboxApiUrl
string mapboxApiUrl to be saved in map-style
reducer.
payload.mapStylesReplaceDefault
Boolean mapStylesReplaceDefault to be saved in map-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
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 properties width
, height
, latitude
longitude
, zoom
, pitch
, bearing
, dragRotate
viewport.width
Number? Width of viewport
viewport.height
Number? Height of viewport
viewport.zoom
Number? Zoom of viewport
viewport.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 projection
viewport.longitude
Number? Longitude Center of viewport on map in mercator projection
viewport.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