![\"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 ![](\"https://img.shields.io/endpoint.svg?url=https%3A%2F%2Fdeveloper.oswaldlabs.com%2Fnetlify-status%2F0c9b895c-acd0-43fd-8af7-fe960181b686?style=flat\")
\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](\"https://eng.uber.com/wp-content/uploads/2018/05/image4-3-768x493.png\")
](http://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 [Mapbox GL](https://www.mapbox.com) and [deck.gl](http://uber.github.io/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 this step-by-step [tutorial][vis-academy] on vis.academy.\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- [Tutorial][vis-academy]\n- [Stack Overflow][stack]\n- [Contribution Guidelines][contributing]\n- [Api Reference][api-reference]\n- [Roadmap][roadmap]\n\n## Env\n\nUse Node 8.15.0 and above, older node versions have not been tested.\nFor best results, use [nvm](https://github.com/creationix/nvm) `nvm install`.\n\n## Install kepler.gl\n\nInstall node (`> 8.15.0`), yarn, and project dependencies\n\n```sh\nnpm install --save kepler.gl\n// or\nyarn add kepler.gl\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:\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 [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/reducers';\nimport {enhanceReduxMiddleware} from 'kepler.gl/middleware';\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';\n\nconst Map = props => (\n