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.

Basic Setup

kepler.gl keeps its state in Redux and draws its base map through Mapbox GL JS via react-map-gl. Register the Maptoolkit style URL through the mapStyles prop and clear the Mapbox token so it never tries to load Mapbox-hosted styles.

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

kepler.gl is React-only - there is no vanilla-JS/CDN build to fall back to. This code needs a React + bundler project (Create React App, Vite, …) with a <div id="root"></div> to mount into.

import { createRoot } from 'react-dom/client';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import { enhanceReduxMiddleware } from '@kepler.gl/reducers';
import keplerGlReducer from '@kepler.gl/reducers';
import KeplerGl from '@kepler.gl/components';

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

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

const attributionStyle = { position: 'absolute', height: 24, bottom: 8, left: 8, zIndex: 1000 };
const copyrightStyle = {
  position: 'absolute',
  right: 8,
  bottom: 8,
  zIndex: 1000,
  font: '11px/1.4 system-ui, sans-serif',
  background: 'rgba(255, 255, 255, 0.7)',
  padding: '2px 6px',
};

function App() {
  return (
    <Provider store={store}>
      <KeplerGl
        id="map"
        mapboxApiAccessToken=""
        mapStyles={mapStyles}
        mapStylesReplaceDefault={true}
        width={window.innerWidth}
        height={window.innerHeight}
      />
      <img
        src="https://www.maptoolkit.org/assets/maptoolkit-attribution.png"
        alt="Maptoolkit"
        style={attributionStyle}
      />
      <div style={copyrightStyle}>
        © <a href="https://www.maptoolkit.com/copyright/">Maptoolkit</a>{' '}
        © <a href="https://www.openstreetmap.org/copyright">OSM</a>
      </div>
    </Provider>
  );
}

createRoot(document.getElementById('root')).render(<App />);

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

Keep the Maptoolkit logo and the © Maptoolkit © Openstreetmap copyright line visible. There is no official kepler.gl logo package, so the example above renders the logo image and copyright text as plain overlay elements next to <KeplerGl>. See Quick Start - Add attribution for the full requirements.