![\"version\"](\"https://img.shields.io/npm/v/kepler.gl.svg?style=flat\")
\n \n \n ![\"build\"](\"https://api.travis-ci.com/keplergl/kepler.gl.svg?branch=master\")
\n \n \n ![\"stars\"](\"https://img.shields.io/github/stars/keplergl/kepler.gl.svg?style=flat\")
\n \n \n 
\n \n \n 
\n \n \n 
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
![\"Kepler.gl\"](\"https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/website/icons/kepler.gl-logo.png\"){kind=icon}
](http://kepler.gl)\n\n[![\"Kepler.gl](\"./screenshots/screenshot.png\")
](https://kepler.gl/demo)\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://maplibre.org/) and [deck.gl](https://deck.gl/), 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://redux.js.org/) 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://docs.kepler.gl/).\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` / `yarn bootstrap` try to compile the `gl` dev dependency from source; if that fails, see [Troubleshooting: gl package install](contributing/DEVELOPERS.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/components\n// or\nyarn add @kepler.gl/components\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://unpkg.com/kepler.gl/umd).\nYou can add the script tag to your html file as it follows (latest version of Kepler.gl):\n\n```html\n\n```\n\nor if you would like, you can load a specific version:\n\n```html\n\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 a built-in task middleware to handle async side effects.\n\nYou need to add `taskMiddleware` to your store. The easiest way is via `enhanceReduxMiddleware` from `@kepler.gl/reducers`:\n\n```js\nimport {createStore, combineReducers, applyMiddleware, compose} from 'redux';\nimport keplerGlReducer, {enhanceReduxMiddleware} from '@kepler.gl/reducers';\n\nconst initialState = {};\nconst reducers = combineReducers({\n // <-- mount kepler.gl reducer in your app\n keplerGl: keplerGlReducer,\n\n // Your other reducers here\n app: appReducer\n});\n\n// using createStore\nexport default createStore(\n reducer,\n initialState,\n applyMiddleware(\n enhanceReduxMiddleware([\n /* Add other middlewares here */\n ])\n )\n);\n```\n\nOr if use enhancer:\n\n```js\n// using enhancers\nconst initialState = {};\nconst middlewares = enhanceReduxMiddleware([\n // 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/components';\n\nconst Map = props => (\n