Adding kepler.gl to a nextjs application

Step by step guide for adding kepler.gl to nextjs app

Please notice that the final code is available here

First we create a new project with nextjs:

npx create-next-app next-kepler-gl   
cd next-kepler-gl

Now we install packages:

 yarn add kepler.gl styled-components redux react-redux

Then open the project in your code editor and create store/index.js file in the root of your project and put this code in it:

import keplerGlReducer from "kepler.gl/reducers";
import {createStore, combineReducers, applyMiddleware} from "redux";
import {taskMiddleware} from "react-palm/tasks";

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

const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));
export default store;

Now let's create our Map component in pages/Map.jsx:

import React from "react";
import KeplerGl from "kepler.gl";
import {ReactReduxContext} from "react-redux";

const Map = () => {
  return (
    <ReactReduxContext.Consumer>
      {({store}) => (
        <KeplerGl
          id="map"
          width={window.innerWidth}
          mapboxApiAccessToken={
            "put your token here"
          }
          height={window.innerHeight}
          store={store}
        />
      )}
    </ReactReduxContext.Consumer>
  );
};

export default Map;

Please notice that you need to put your own Mapbox access token in the above code and you probably want to read it from environment variables.

Now let's go to pages/index.js and create our redux wrapper and use our Map component.
So in pages/index.js:

import dynamic from "next/dynamic";
import {Provider as ReduxProvider} from "react-redux";
import store from "../store";

const DynamicMap = dynamic(() => import("./Map"), {
  ssr: false,
});

export default function Home() {
  return (
    <div>
      <ReduxProvider store={store}>
        <DynamicMap />
      </ReduxProvider>
    </div>
  );
}

If you have any question about dynamic import and turning the ssr off please see nextjs docs

Now we can run our project:

yarn dev

This should work and if it is working for you so you are good to go and you don't need to continue reading but I'm getting this error:

error - unhandledRejection: Error [ReferenceError]: ReadableStream is not defined
    at onShellReady

According to this github issue:

Kepler.GL is not compatible with react 18, So I had to downgrade my React version and as the latest version of Next.JS requires React 18, so I had to downgrade the Next.JS version as well.

So we need to do this:

yarn remove react react-dom next

and then

 yarn add react@17.0.2 react-dom@17.0.2 next@11.1.4

Now if we run project again we should see this:

Thanks for reading
ps: If you have any suggestion instead of downgrading react, react-dom and nextjs please share it in the comments

Blog

Adding kepler.gl to a nextjs application

Shahab Emami

Join Our Newsletter. No Spam, Only the good stuff.

Related