[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70692":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},70692,"kepler.gl","keplergl\u002Fkepler.gl","keplergl","Kepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.","http:\u002F\u002Fkepler.gl",null,"TypeScript",11858,1949,210,454,0,8,17,45,24,44.87,"MIT License",false,"master",true,[27,28,29,30,31],"data-visualization","geospatial","kepler","mapbox","visualization","2026-06-12 02:02:42","\u003Cp align=\"right\">\n  \u003Ca href=\"https:\u002F\u002Fnpmjs.org\u002Fpackage\u002Fkepler.gl\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fkepler.gl.svg?style=flat\" alt=\"version\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Ftravis-ci.com\u002Fkeplergl\u002Fkepler.gl\">\n    \u003Cimg src=\"https:\u002F\u002Fapi.travis-ci.com\u002Fkeplergl\u002Fkepler.gl.svg?branch=master\" alt=\"build\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkeplergl\u002Fkepler.gl\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fkeplergl\u002Fkepler.gl.svg?style=flat\" alt=\"stars\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href='https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT'>\n    \u003Cimg src='https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-blue.svg' alt='MIT License' \u002F>\n  \u003C\u002Fa>\n  \u003Ca href='https:\u002F\u002Fapp.fossa.com\u002Fprojects\u002Fcustom%2B4458%2Fgithub.com%2Fkeplergl%2Fkepler.gl?ref=badge_shield'>\n    \u003Cimg src='https:\u002F\u002Fapp.fossa.com\u002Fapi\u002Fprojects\u002Fcustom%2B4458%2Fgithub.com%2Fkeplergl%2Fkepler.gl.svg?type=shield' alt='Fossa' \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fapp.netlify.com\u002Fsites\u002Fkeplergl\u002Fdeploys\">\n    \u003Cimg src=\"https:\u002F\u002Fapi.netlify.com\u002Fapi\u002Fv1\u002Fbadges\u002F0c9b895c-acd0-43fd-8af7-fe960181b686\u002Fdeploy-status\" alt=\"Netlify Status\"\u002F>\n  \u003C\u002Fa>\n  \u003Ca href='https:\u002F\u002Fcoveralls.io\u002Fgithub\u002Fkeplergl\u002Fkepler.gl?branch=master'>\n    \u003Cimg src='https:\u002F\u002Fcoveralls.io\u002Frepos\u002Fgithub\u002Fkeplergl\u002Fkepler.gl\u002Fbadge.svg?branch=master' alt='Coverage Status' \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Ch1 align=\"center\">\n  kepler.gl | \u003Ca href=\"https:\u002F\u002Fkepler.gl\">Website\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fkepler.gl\u002F#\u002Fdemo\">Demo App\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fdocs.kepler.gl\u002F\">Docs\u003C\u002Fa>\n\u003C\u002Fh1>\n\u003Ch3>\u003C\u002Fh3>\n\n[\u003Cimg width=\"120\" alt=\"Kepler.gl\" src=\"https:\u002F\u002Fd1a3f4spazzrp4.cloudfront.net\u002Fkepler.gl\u002Fwebsite\u002Ficons\u002Fkepler.gl-logo.png\">](http:\u002F\u002Fkepler.gl)\n\n[\u003Cimg width=\"600\" alt=\"Kepler.gl Demo\" src=\".\u002Fscreenshots\u002Fscreenshot.png\">](https:\u002F\u002Fkepler.gl\u002Fdemo)\n\n[Kepler.gl][web] is a data-agnostic, high-performance web-based application for visual exploration of large-scale geolocation data sets. Built on top of [MapLibre GL](https:\u002F\u002Fmaplibre.org\u002F) and [deck.gl](https:\u002F\u002Fdeck.gl\u002F), kepler.gl can render millions of points representing thousands of trips and perform spatial aggregations on the fly.\n\nKepler.gl is also a React component that uses [Redux](https:\u002F\u002Fredux.js.org\u002F) to manage its state and data flow. It can be embedded into other React-Redux applications and is highly customizable. For information on how to embed kepler.gl in your app take a look at the [documentation](https:\u002F\u002Fdocs.kepler.gl\u002F).\n\n## Links\n\n- [Website][web]\n- [Demo][demo-app]\n- [Examples][examples]\n- [Get Started][get-started]\n- [App User Guide][user-guide]\n- [Jupyter Widget User Guide][user-guide-jupyter]\n- [Documentation][docs]\n- [Stack Overflow][stack]\n- [Contribution Guidelines][contributing]\n- [Api Reference][api-reference]\n- [Roadmap][roadmap]\n\n## Env\n\nFor **developing this repository**, use Node **20.19.3** (see `.nvmrc`): run `nvm install` and `nvm use`. Newer Node versions can make `yarn install` \u002F `yarn bootstrap` try to compile the `gl` dev dependency from source; if that fails, see [Troubleshooting: gl package install](contributing\u002FDEVELOPERS.md#troubleshooting-gl-package-install).\n\nWhen **using kepler.gl as a dependency** in your own app, use Node 20.19.3 or a supported LTS; older Node versions are not supported or tested.\n\n## Install kepler.gl modules\n\nKepler.gl consists of different modules. Each module can be added to the project like this:\n\n```sh\nnpm install --save @kepler.gl\u002Fcomponents\n\u002F\u002F or\nyarn add @kepler.gl\u002Fcomponents\n```\n\nkepler.gl is built upon [mapbox][mapbox]. You will need a [Mapbox Access Token][mapbox-token] to use it.\n\nIf you don't use a module bundler, it's also fine. Kepler.gl npm package includes precompiled production UMD builds in the [umd folder](https:\u002F\u002Funpkg.com\u002Fkepler.gl\u002Fumd).\nYou can add the script tag to your html file as it follows (latest version of Kepler.gl):\n\n```html\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fkepler.gl\u002Fumd\u002Fkeplergl.min.js\" \u002F>\n```\n\nor if you would like, you can load a specific version:\n\n```html\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fkepler.gl@3.0.0\u002Fumd\u002Fkeplergl.min.js\" \u002F>\n```\n\n## Develop kepler.gl\n\nTake a look at the [development guide][developers] to develop kepler.gl locally.\n\n## Basic Usage\n\nHere are the basic steps to import kepler.gl into your app. You also take a look at the examples folder. Each example in the folder can be installed and run locally.\n\n### 1. Mount reducer\n\nKepler.gl uses Redux to manage its internal state, along with [react-palm][react-palm] middleware to handle side effects.\n\nYou need to add `taskMiddleware` of `react-palm` to your store too. We are actively working on a solution where\n`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.\n\n```js\nimport {createStore, combineReducers, applyMiddleware, compose} from 'redux';\nimport keplerGlReducer from '@kepler.gl\u002Freducers';\nimport {enhanceReduxMiddleware} from '@kepler.gl\u002Fmiddleware';\n\nconst initialState = {};\nconst reducers = combineReducers({\n  \u002F\u002F \u003C-- mount kepler.gl reducer in your app\n  keplerGl: keplerGlReducer,\n\n  \u002F\u002F Your other reducers here\n  app: appReducer\n});\n\n\u002F\u002F using createStore\nexport default createStore(\n  reducer,\n  initialState,\n  applyMiddleware(\n    enhanceReduxMiddleware([\n      \u002F* Add other middlewares here *\u002F\n    ])\n  )\n);\n```\n\nOr if use enhancer:\n\n```js\n\u002F\u002F using enhancers\nconst initialState = {};\nconst middlewares = enhanceReduxMiddleware([\n  \u002F\u002F Add other middlewares here\n]);\nconst enhancers = [applyMiddleware(...middlewares)];\n\nexport default createStore(reducer, initialState, compose(...enhancers));\n```\n\nIf you mount kepler.gl reducer in another address instead of `keplerGl`, or the kepler.gl reducer is not\nmounted at root of your state, you will need to specify the path to it when you mount the component\nwith the `getState` prop.\n\nRead more about [Reducers][reducers].\n\n### 2. Mount Component\n\n```js\nimport KeplerGl from '@kepler.gl\u002Fcomponents';\n\nconst Map = props => (\n  \u003CKeplerGl id=\"foo\" width={width} mapboxApiAccessToken={token} height={height} \u002F>\n);\n```\n\n### Props\n\n| Prop Name                     | Type          | Default Value             | Description                                                                                                                                                                                                             |\n| ----------------------------- | ------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`                          | String        | `map`                     | The unique identifier for the KeplerGl instance. Required when multiple KeplerGl instances exist. It maps to the state in the reducer (e.g. component with id `foo` can be found in`state.keplerGl.foo`).               |\n| `mapboxApiAccessToken`        | String        | `undefined`               | API token for Mapbox, used for rendering base maps. Create a free token at [Mapbox](https:\u002F\u002Fwww.mapbox.com).                                                                                                            |\n| `getState`                    | Function      | `state => state.keplerGl` | Function that specifies the path to the root KeplerGl state in the reducer.                                                                                                                                             |\n| `width`                       | Number        | `800`                     | The width of the KeplerGl UI in pixels.                                                                                                                                                                                 |\n| `height`                      | Number        | `800`                     | The height of the KeplerGl UI in pixels.                                                                                                                                                                                |\n| `appName`                     | String        | `Kepler.Gl`               | The app name displayed in the side panel header.                                                                                                                                                                        |\n| `version`                     | String        | `v1.0`                    | The version displayed in the side panel header.                                                                                                                                                                         |\n| `onSaveMap`                   | Function      | `undefined`               | A function called when the \"Save Map URL\" in side panel header is clicked.                                                                                                                                              |\n| `onViewStateChange`           | Function      | `undefined`               | Triggered when the map viewport is updated. Receives `viewState` parameter with updated values like longitude, latitude, zoom, etc.                                                                                     |\n| `getMapboxRef(mapbox, index)` | Function      | `undefined`               | Called when `KeplerGl` adds or removes a MapContainer with an inner Mapbox map. `mapbox` is a `MapRef` when added, or `null` when removed. `index` is `0` for the first map and `1` for the second map in a split view. |\n| `actions`                     | Object        | `{}`                      | Custom action creators to override the default KeplerGl action creators. Only use custom action when you want to modify action payload.                                                                                 |\n| `mint`                        | Boolean       | `true`                    | Determines whether to load a fresh empty state when mounted. When `false`, the state persists across remounts. Useful for modal use cases.                                                                              |\n| `theme`                       | Object\u002FString | `null`                    | Set to `\"dark\"`, `\"light\"`, or `\"base\"`, or pass a theme object to customize KeplerGl’s style.                                                                                                                          |\n| `mapboxApiUrl`                | String        | `https:\u002F\u002Fapi.mapbox.com`  | The Mapbox API URL if you are using a custom Mapbox tile server.                                                                                                                                                        |\n| `mapStylesReplaceDefault`     | Boolean       | `false`                   | Set to `true` to replace default map styles with custom ones. (see `mapStyles` prop)                                                                                                                                    |\n| `mapStyles`                   | Array         | `[]`                      | An array of [custom map styles](#example-custom-map-style) for the map style selection panel. Styles replace the default ones if `mapStylesReplaceDefault` is `true`.                                                   |\n| `initialUiState`              | Object        | `undefined`               | The initial UI state applied to the `uiState` reducer.                                                                                                                                                                  |\n| `localeMessages`              | Object        | `undefined`               | Used to modify or add new translations. Read more about [Localization][localization].                                                                                                                                   |\n\n#### Example Custom Map Style\n\nYou can supply additional map styles to be displayed in [map style selection panel](https:\u002F\u002Fgithub.com\u002Fkeplergl\u002Fkepler.gl\u002Fblob\u002Fmaster\u002Fdocs\u002Fuser-guides\u002Ff-map-styles\u002F1-base-map-styles.md). By default, additional map styles will be added to default map styles. If you pass `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](https:\u002F\u002Fgithub.com\u002Fkeplergl\u002Fkepler.gl\u002Fblob\u002Fmaster\u002Fdocs\u002Fuser-guides\u002Ff-map-styles\u002F2-map-layers.md). Supply your own `layerGroups` to override default for more accurate layer grouping.\n\nEach `mapStyles` should has the following properties:\n\n- `id` (String, required) unique string that should **not** be one of these reserved `dark` `light` `muted`. `muted_night`\n- `label` (String, required) name to be displayed in map style selection panel\n- `url` (String, required) mapbox style url or a url pointing to the map style json object written in [Mapbox GL Style Spec](https:\u002F\u002Fdocs.mapbox.com\u002Fmapbox-gl-js\u002Fstyle-spec\u002F).\n- `icon` (String, optional) image icon of the style, it can be a url, or an [image data url](https:\u002F\u002Fflaviocopes.com\u002Fdata-urls\u002F#how-does-a-data-url-look)\n- `layerGroups` (Array, optional)\n\n```js\nconst mapStyles = [\n  {\n    id: 'my_dark_map',\n    label: 'Dark Streets 9',\n    url: 'mapbox:\u002F\u002Fstyles\u002Fmapbox\u002Fdark-v9',\n    icon: `${apiHost}\u002Fstyles\u002Fv1\u002Fmapbox\u002Fdark-v9\u002Fstatic\u002F-122.3391,37.7922,9.19,0,0\u002F400x300?access_token=${accessToken}&logo=false&attribution=false`,\n    layerGroups: [\n      {\n        slug: 'label',\n        filter: ({id}) => id.match(\u002F(?=(label|place-|poi-))\u002F),\n        defaultVisibility: true\n      },\n      {\n        slug: '3d building',\n        filter: () => false,\n        defaultVisibility: false\n      }\n    ]\n  }\n];\n```\n\n### 3. Dispatch custom actions to `keplerGl` reducer.\n\nOne advantage of using the reducer over React component state to handle keplerGl state is the flexibility\nto customize its behavior. If you only have one `KeplerGl` instance in your app or never intend to dispatch actions to KeplerGl from outside the component itself,\nyou 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.\n\nThere are multiple ways to dispatch actions to a specific `KeplerGl` instance.\n\n- In the root reducer, with reducer updaters.\n\nEach action is mapped to a reducer updater in kepler.gl. You can import the reducer updater corresponding to a specific action, and call it with the previous state and action payload to get the updated state.\ne.g. `updateVisDataUpdater` is the updater for `ActionTypes.UPDATE_VIS_DATA` (take a look at each reducer `reducers\u002Fvis-state.js` for action to updater mapping).\nHere is an example how you can listen to an app action `QUERY_SUCCESS` and call `updateVisDataUpdater` to load data into Kepler.Gl.\n\n```js\nimport {keplerGlReducer, visStateUpdaters} from '@kepler.gl\u002Freducers';\n\n\u002F\u002F Root Reducer\nconst reducers = combineReducers({\n  keplerGl: keplerGlReducer,\n\n  app: appReducer\n});\n\nconst composedReducer = (state, action) => {\n  switch (action.type) {\n    case 'QUERY_SUCCESS':\n      return {\n        ...state,\n        keplerGl: {\n          ...state.keplerGl,\n\n          \u002F\u002F 'map' is the id of the keplerGl instance\n          map: {\n            ...state.keplerGl.map,\n            visState: visStateUpdaters.updateVisDataUpdater(state.keplerGl.map.visState, {\n              datasets: action.payload\n            })\n          }\n        }\n      };\n  }\n  return reducers(state, action);\n};\n\nexport default composedReducer;\n```\n\nRead more about [using updaters to modify kepler.gl state][using-updaters]\n\n- Using redux `connect`\n\nYou can add a dispatch function to your component that dispatches actions to a specific `keplerGl` component,\nusing connect.\n\n```js\n\u002F\u002F component\nimport KeplerGl from '@kepler.gl\u002Fcomponents';\n\n\u002F\u002F action and forward dispatcher\nimport {toggleFullScreen, forwardTo} from '@kepler.gl\u002Factions';\nimport {connect} from 'react-redux';\n\nconst MapContainer = props => (\n  \u003Cdiv>\n    \u003Cbutton onClick={() => props.keplerGlDispatch(toggleFullScreen())}\u002F>\n    \u003CKeplerGl\n      id=\"foo\"\n    \u002F>\n  \u003C\u002Fdiv>\n)\n\nconst mapStateToProps = state => state\nconst mapDispatchToProps = (dispatch, props) => ({\n dispatch,\n keplerGlDispatch: forwardTo(‘foo’, dispatch)\n});\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(MapContainer);\n```\n\n- Wrap action payload\n\nYou can also simply wrap an action into a forward action with the `wrapTo` helper\n\n```js\n\u002F\u002F component\nimport KeplerGl from '@kepler.gl\u002Fcomponents';\n\n\u002F\u002F action and forward dispatcher\nimport {toggleFullScreen, wrapTo} from '@kepler.gl\u002Factions';\n\n\u002F\u002F create a function to wrapper action payload to 'foo'\nconst wrapToMap = wrapTo('foo');\nconst MapContainer = ({dispatch}) => (\n  \u003Cdiv>\n    \u003Cbutton onClick={() => dispatch(wrapToMap(toggleFullScreen())} \u002F>\n    \u003CKeplerGl\n      id=\"foo\"\n    \u002F>\n  \u003C\u002Fdiv>\n);\n\n```\n\nRead more about [forward dispatching actions][forward-actions]\n\n### 4. Customize style.\n\nKepler.gl implements css styling using [Styled-Components](https:\u002F\u002Fwww.styled-components.com\u002F). By using said framework Kepler.gl offers the ability to customize its style\u002Ftheme using the following approaches:\n\n- Passing a Theme prop\n- Styled-Components ThemeProvider\n\nThe available properties to customize are listed here [theme](https:\u002F\u002Fgithub.com\u002Fkeplergl\u002Fkepler.gl\u002Fblob\u002Fmaster\u002Fsrc\u002Fstyles\u002Fbase.js).\n\n[Custom theme example](https:\u002F\u002Fgithub.com\u002Fkeplergl\u002Fkepler.gl\u002Ftree\u002Fmaster\u002Fexamples\u002Fcustom-theme).\n\n#### Passing a Theme prop.\n\nYou can customize Kepler.gl theme by passing a **theme** props to Kepler.gl react component as it follows:\n\n```javascript\nconst white = '#ffffff';\nconst customTheme = {\n  sidePanelBg: white,\n  titleTextColor: '#000000',\n  sidePanelHeaderBg: '#f7f7F7',\n  subtextColorActive: '#2473bd'\n};\n\nreturn (\n  \u003CKeplerGl\n    mapboxApiAccessToken={MAPBOX_TOKEN}\n    id=\"map\"\n    width={800}\n    height={800}\n    theme={customTheme}\n  \u002F>\n);\n```\n\nAs you can see the customTheme object defines certain properties which will override Kepler.gl default style rules.\n\n#### Styled-Components Theme Provider.\n\nIn order to customize Kepler.gl theme using [ThemeProvider](https:\u002F\u002Fwww.styled-components.com\u002Fdocs\u002Fapi#themeprovider) you can simply wrap Kepler.gl using ThemeProvider as it follows:\n\n```javascript\nimport {ThemeProvider} from 'styled-components';\n\nconst white = '#ffffff';\nconst customTheme = {\n  sidePanelBg: white,\n  titleTextColor: '#000000',\n  sidePanelHeaderBg: '#f7f7F7',\n  subtextColorActive: '#2473bd'\n};\n\nreturn (\n  \u003CThemeProvider theme={customTheme}>\n    \u003CKeplerGl mapboxApiAccessToken={MAPBOX_TOKEN} id=\"map\" width={800} height={800} \u002F>\n  \u003C\u002FThemeProvider>\n);\n```\n\n### 5. Render Custom UI components.\n\nEveryone wants the flexibility to render custom kepler.gl components. Kepler.gl has a dependency injection system that allow you to inject\ncomponents to KeplerGl replacing existing ones. All you need to do is to create a component factory for the one you want to replace, import the original component factory\nand call `injectComponents` at the root component of your app where `KeplerGl` is mounted.\nTake a look at `examples\u002Fdemo-app\u002Fsrc\u002Fapp.js` and see how it renders a custom side panel header in kepler.gl\n\n```javascript\nimport {injectComponents, PanelHeaderFactory} from '@kepler.gl\u002Fcomponents';\n\n\u002F\u002F define custom header\nconst CustomHeader = () => \u003Cdiv>My kepler.gl app\u003C\u002Fdiv>;\nconst myCustomHeaderFactory = () => CustomHeader;\n\n\u002F\u002F Inject custom header into Kepler.gl, replacing default\nconst KeplerGl = injectComponents([[PanelHeaderFactory, myCustomHeaderFactory]]);\n\n\u002F\u002F render KeplerGl, it will render your custom header instead of the default\nconst MapContainer = () => (\n  \u003Cdiv>\n    \u003CKeplerGl id=\"foo\" \u002F>\n  \u003C\u002Fdiv>\n);\n```\n\nUsing `withState` helper to add reducer state and actions to customized component as additional props.\n\n```js\nimport {withState, injectComponents, PanelHeaderFactory} from '@kepler.gl\u002Fcomponents';\nimport {visStateLens} from '@kepler.gl\u002Freducers';\n\n\u002F\u002F custom action wrap to mounted instance\nconst addTodo = text =>\n  wrapTo('map', {\n    type: 'ADD_TODO',\n    text\n  });\n\n\u002F\u002F define custom header\nconst CustomHeader = ({visState, addTodo}) => (\n  \u003Cdiv onClick={() => addTodo('hello')}>{`${\n    Object.keys(visState.datasets).length\n  } dataset loaded`}\u003C\u002Fdiv>\n);\n\n\u002F\u002F now CustomHeader will receive `visState` and `addTodo` as additional props.\nconst myCustomHeaderFactory = () =>\n  withState(\n    \u002F\u002F keplerGl state lenses\n    [visStateLens],\n    \u002F\u002F customMapStateToProps\n    headerStateToProps,\n    \u002F\u002F actions\n    {addTodo}\n  )(CustomHeader);\n```\n\nRead more about [replacing UI component][replace-ui-component]\n\n### 6. How to add data to map\n\nTo interact with a kepler.gl instance and add new data to it, you can dispatch the **`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).\n\n#### Parameters\n\n- `data` **[Object][40]** **\\*required**\n\n  - `datasets` **([Array][41]<[Object][40]> | [Object][40])** **\\*required** datasets can be a dataset or an array of datasets\n    Each dataset object needs to have `info` and `data` property.\n    - `datasets.info` **[Object][40]** \\-info of a dataset\n      - `datasets.info.id` **[string][42]** id of this dataset. If config is defined, `id` should matches the `dataId` in config.\n      - `datasets.info.label` **[string][42]** A display name of this dataset\n    - `datasets.data` **[Object][40]** **\\*required** The data object, in a tabular format with 2 properties `fields` and `rows`\n      - `datasets.data.fields` **[Array][41]<[Object][40]>** **\\*required** Array of fields,\n        - `datasets.data.fields.name` **[string][42]** **\\*required** Name of the field,\n      - `datasets.data.rows` **[Array][41]<[Array][41]>** **\\*required** Array of rows, in a tabular format with `fields` and `rows`\n  - `options` **[Object][40]**\n\n    - `options.centerMap` **[boolean][43]** `default: true` if `centerMap` is set to `true` kepler.gl will place the map view within the data points boundaries\n    - `options.readOnly` **[boolean][43]** `default: false` if `readOnly` is set to `true`\n      the left setting panel will be hidden\n    - `options.keepExistingConfig` **[boolean][43]** `default: false` whether to keep exiting map config, including layers, filters and splitMaps.\n\n- `config` **[Object][40]** this object will contain the full kepler.gl instance configuration {mapState, mapStyle, visState}\n\nKepler.gl provides an easy API `KeplerGlSchema.getConfigToSave` to generate a json blob of the current kepler instance configuration.\n\n#### Examples\n\n```javascript\n\u002F\u002F app.js\nimport {addDataToMap} from '@kepler.gl\u002Factions';\n\nconst sampleTripData = {\n  fields: [\n    {name: 'tpep_pickup_datetime', format: 'YYYY-M-D H:m:s', type: 'timestamp'},\n    {name: 'pickup_longitude', format: '', type: 'real'},\n    {name: 'pickup_latitude', format: '', type: 'real'}\n  ],\n  rows: [\n    ['2015-01-15 19:05:39 +00:00', -73.99389648, 40.75011063],\n    ['2015-01-15 19:05:39 +00:00', -73.97642517, 40.73981094],\n    ['2015-01-15 19:05:40 +00:00', -73.96870422, 40.75424576]\n  ]\n};\n\nconst sampleConfig = {\n  visState: {\n    filters: [\n      {\n        id: 'me',\n        dataId: 'test_trip_data',\n        name: 'tpep_pickup_datetime',\n        type: 'timeRange',\n        view: 'enlarged'\n      }\n    ]\n  }\n};\n\nthis.props.dispatch(\n  addDataToMap({\n    datasets: {\n      info: {\n        label: 'Sample Taxi Trips in New York City',\n        id: 'test_trip_data'\n      },\n      data: sampleTripData\n    },\n    option: {\n      centerMap: true,\n      readOnly: false\n    },\n    config: sampleConfig\n  })\n);\n```\n\nRead more about [addDataToMap](.\u002Fdocs\u002Fapi-reference\u002Factions\u002Factions.md#adddatatomap) and [Saving and loading maps with schema manager][saving-loading-w-schema].\n\n[contributing]: contributing\u002FREADME.md\n[demo-app]: http:\u002F\u002Fkepler.gl\u002F#\u002Fdemo\n[github]: https:\u002F\u002Fgithub.com\u002Fkeplergl\u002Fkepler.gl\n[github-pr]: https:\u002F\u002Fhelp.github.com\u002Farticles\u002Fcreating-a-pull-request\u002F\n[mapbox]: https:\u002F\u002Fwww.mapbox.com\n[mapbox-token]: https:\u002F\u002Fwww.mapbox.com\u002Fhelp\u002Fdefine-access-token\u002F\n[developers]: contributing\u002FDEVELOPERS.md\n[examples]: https:\u002F\u002Fgithub.com\u002Fkeplergl\u002Fkepler.gl\u002Ftree\u002Fmaster\u002Fexamples\n[react-palm]: https:\u002F\u002Fgithub.com\u002Fbtford\u002Freact-palm\n[roadmap]: https:\u002F\u002Fgithub.com\u002Fkeplergl\u002Fkepler.gl\u002Fwiki\u002FKepler.gl-2019-Roadmap\n[stack]: https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002Ftagged\u002Fkepler.gl\n[web]: http:\u002F\u002Fwww.kepler.gl\u002F\n[docs]: https:\u002F\u002Fdocs.kepler.gl\u002F\n[user-guide]: docs\u002Fuser-guides\u002FREADME.md\n[user-guide-jupyter]: docs\u002Fkeplergl-jupyter\u002FREADME.md\n[api-reference]: docs\u002Fapi-reference\u002FREADME.md\n[get-started]: .\u002Fdocs\u002Fapi-reference\u002Fget-started.md\n[reducers]: docs\u002Fapi-reference\u002Freducers\u002FREADME.md\n[components]: docs\u002Fapi-reference\u002Fcomponents\u002FREADME.md\n[custom-theme]: docs\u002Fapi-reference\u002Fcustom-theme\u002FREADME.md\n[reducers]: docs\u002Fapi-reference\u002Freducers\u002FREADME.md\n[actions-updaters]: docs\u002Fapi-reference\u002Factions\u002FREADME.md\n[processors]: docs\u002Fapi-reference\u002Fprocessors\u002FREADME.md\n[schemas]: docs\u002Fapi-reference\u002Fschemas\u002FREADME.md\n[using-updaters]: .\u002Fdocs\u002Fapi-reference\u002Fadvanced-usages\u002Fusing-updaters.md\n[custom-map-styles]: .\u002Fdocs\u002Fapi-reference\u002Fadvanced-usages\u002Fcustom-map-styles.md\n[forward-actions]: .\u002Fdocs\u002Fapi-reference\u002Fadvanced-usages\u002Fforward-actions.md\n[replace-ui-component]: .\u002Fdocs\u002Fapi-reference\u002Fadvanced-usages\u002Freplace-ui-component.md\n[saving-loading-w-schema]: .\u002Fdocs\u002Fapi-reference\u002Fadvanced-usages\u002Fsaving-loading-w-schema.md\n[localization]: .\u002Fdocs\u002Fapi-reference\u002Flocalization\u002FREADME.md\n[40]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FObject\n[41]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FArray\n[42]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FString\n[43]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FBoolean\n[44]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FNumber\n[45]: https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FStatements\u002Ffunction\n","Kepler.gl 是一个强大的开源地理空间分析工具，专为大规模数据集设计。它基于 MapLibre GL 和 deck.gl 构建，能够高效渲染数百万个点并实时执行空间聚合操作。作为 React 组件，Kepler.gl 通过 Redux 管理状态和数据流，支持高度定制化，并可轻松集成到其他 React-Redux 应用中。适用于需要对大量地理位置数据进行可视化探索的场景，如交通流量分析、城市规划等。",2,"2026-06-11 03:33:39","high_star"]