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
Top comments (0)