> 10.15.0), yarn, and project dependencies
react-palmto your store too. We are actively working on a solution where
react-palmwill not be required, however it is still a very lightweight side effects management tool that is easier to test than react-thunk.
keplerGl, or the kepler.gl reducer is not mounted at root of your state, you will need to specify the path to it when you mount the component with the
idis required if you have multiple KeplerGl instances in your app. It defines the prop name of the KeplerGl state that is stored in the KeplerGl reducer. For example, the state of the KeplerGl component with id
foois stored in
mapboxApiAccessTokenwill not be reuiqred.
state => state.keplerGl
viewState- An updated view state object containing parameters such as longitude, latitude, zoom etc
KeplerGLadds or removes a
MapContainercomponent having an inner Mapbox map.
indexargument is 0 for a single map or 1 for an additional map (since
KeplerGLsupports an optional split map view).
mint: truekepler.gl component will always load a fresh state when re-mount the same component, state inside this component will be destroyed once its unmounted. By Parsing
mint: falsekepler.gl will keep the component state in the store even when it is unmounted, and use it as initial state when re-mounted again. This is useful when mounting kepler.gl in a modal, and keep the same map when re-open.
"base"You can pass theme name or object used to customize Kepler.gl style. Kepler.gl provide an
'light'theme besides the default 'dark' theme. When pass in a theme object Kepler.gl will use the value passed as input to override values from theme.
trueif you want to supply your own
mapStyles. See Below.
mapStylesReplaceDefault: true, they will replace the default ones. kepler.gl will attempt to group layers of your style based on its
idnaming convention and use it to allow toggle visibility of base map layers. Supply your own
layerGroupsto override default for more accurate layer grouping.
mapStylesshould has the following properties:
id(String, required) unique string that should not be one of these reserved
label(String, required) name to be displayed in map style selection panel
undefinedModify default translation or add new translation
KeplerGlinstance in your app or never intend to dispatch actions to KeplerGl from outside the component itself, you don’t need to worry about forwarding dispatch and can move on to the next section. But life is full of customizations, and we want to make yours as enjoyable as possible.
updateVisDataUpdateris the updater for
ActionTypes.UPDATE_VIS_DATA(take a look at each reducer
reducers/vis-state.jsfor action to updater mapping). Here is an example how you can listen to an app action
updateVisDataUpdaterto load data into Kepler.Gl.
keplerGlcomponent, using connect.
injectComponentsat the root component of your app where
KeplerGlis mounted. Take a look at
examples/demo-app/src/app.jsand see how it renders a custom side panel header in kepler.gl
withStatehelper to add reducer state and actions to customized component as additional props.
addDataToMapaction from anywhere inside your app. It adds a dataset or multiple datasets to a kepler.gl instance and updates the full configuration (mapState, mapStyle, visState).
datasets.dataObject *required The data object, in a tabular format with 2 properties
KeplerGlSchema.getConfigToSaveto generate a json blob of the current kepler instance configuration.