nvm install
.> 10.15.0
), yarn, and project dependenciestaskMiddleware
of react-palm
to your store too. We are actively working on a solution where react-palm
will 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 getState
prop.map
id
is 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 foo
is stored in state.keplerGl.foo
.undefined
mapboxApiAccessToken
will not be reuiqred.state => state.keplerGl
800
800
Kepler.Gl
v1.0
undefined
undefined
viewState
- An updated view state object containing parameters such as longitude, latitude, zoom etcundefined
KeplerGL
adds or removes a MapContainer
component having an inner Mapbox map.index
argument is 0 for a single map or 1 for an additional map (since KeplerGL
supports an optional split map view).{}
true
mint: true
kepler.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: false
kepler.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.null
"dark"
, "light"
or "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.mapboxApiUrl
(String, optional)https://api.mapbox.com
mapStylesReplaceDefault
(Boolean, optional)false
true
if you want to supply your own mapStyles
. See Below.mapStyles
(Array, optional)[]
mapStylesReplaceDefault: true
, they will replace the default ones. kepler.gl will attempt to group layers of your style based on its id
naming convention and use it to allow toggle visibility of base map layers. Supply your own layerGroups
to override default for more accurate layer grouping.mapStyles
should has the following properties:id
(String, required) unique string that should not be one of these reserved dark
light
muted
. muted_night
label
(String, required) name to be displayed in map style selection panelurl
(String, required) mapbox style url or a url pointing to the map style json object written in Mapbox GL Style Spec. layerGroups
(Array, optional)initialUiState
(object, optional)undefined
INITIAL_UI_STATE
localeMessages
(object, optional)undefined
Modify default translation or add new translationkeplerGl
reducer.KeplerGl
instance 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.KeplerGl
instance.updateVisDataUpdater
is the updater for ActionTypes.UPDATE_VIS_DATA
(take a look at each reducer reducers/vis-state.js
for action to updater mapping). Here is an example how you can listen to an app action QUERY_SUCCESS
and call updateVisDataUpdater
to load data into Kepler.Gl.connect
keplerGl
component, using connect.wrapTo
helperinjectComponents
at the root component of your app where KeplerGl
is mounted. Take a look at examples/demo-app/src/app.js
and see how it renders a custom side panel header in kepler.glwithState
helper to add reducer state and actions to customized component as additional props.addDataToMap
action 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).KeplerGlSchema.getConfigToSave
to generate a json blob of the current kepler instance configuration.