kepler.gl

kepler.gl is a React-based, WebGL-powered geospatial analytics tool built on deck.gl. It is designed for visualizing large datasets — millions of points, arcs, or hexbins — on top of a base map, with a built-in UI for filtering, coloring, and layering data without writing rendering code.

kepler.gl draws its base map with Mapbox GL JS through react-map-gl and has no native MapLibre support (tracking issue). To show the Maptoolkit community style without a Mapbox account, register it as a custom map style and clear the Mapbox token. No API key is required.

Installation

npm install kepler.gl @kepler.gl/components @kepler.gl/reducers redux react-redux react-palm styled-components

Set up the Redux store

kepler.gl keeps its state in Redux. Add its reducer and middleware to your store:

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { enhanceReduxMiddleware } from '@kepler.gl/reducers';
import keplerGlReducer from '@kepler.gl/reducers';

const reducers = combineReducers({
  keplerGl: keplerGlReducer,
});

const middlewares = enhanceReduxMiddleware([]);
const store = createStore(reducers, {}, compose(applyMiddleware(...middlewares)));

Add the Maptoolkit style as a custom map style

Register the Maptoolkit style URL through the mapStyles prop, and set mapStylesReplaceDefault so kepler.gl drops its built-in Mapbox-hosted styles instead of trying to load them without a token.

import { Provider } from 'react-redux';
import KeplerGl from '@kepler.gl/components';

const mapStyles = [
  {
    id: 'maptoolkit-summer',
    label: 'Maptoolkit Summer',
    url: 'https://styles.maptoolkit.org/summer.json',
  },
];

function App() {
  return (
    <Provider store={store}>
      <KeplerGl
        id="map"
        mapboxApiAccessToken=""
        mapStyles={mapStyles}
        mapStylesReplaceDefault={true}
        width={window.innerWidth}
        height={window.innerHeight}
      />
    </Provider>
  );
}

Without mapStylesReplaceDefault, the style picker still lists kepler.gl’s built-in Mapbox styles. Those requests fail without a Mapbox token, so set it to true if you don’t have one.

Attribution

Every map must show the Maptoolkit logo and the © Maptoolkit © OSM copyright line, both as clickable links. See Quick Start - Add attribution.