Geospatial Data Visualization with kepler.gl and React
Hi All ! 🌐
We’ll incorporate Kepler.gl into a React web application in this article.
Kepler.gl is a great tool for quickly visualizing large geographic datasets,
but if you want to get continuously updated data from an API or create a more customised web application, you can integrate Kepler.gl into a React Web Application.
1-Setting up React and KeplerGL
For the sake of simplicity, we are gonna use the create-react-app utility.
npx create-react-app my-app
cd my-app
npm startNext, we’ll add the required dependencies.
"dependencies": {
"kepler.gl": "^2.2.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-palm": "^3.2.2",
"react-redux": "^7.2.0",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"styled-components": "^5.3.6"
},Here, redux is important because KeplerGL depends on Redux to work properly.
2-Create helpers.js file
I used earthquake data in JSON format for the sample application. The fetchData function uses helpers to retrieve data from a remote URL. To use the httpGet method, we must first create the helpers.js file.
// helpers.js file
const helpers = {
httpGet: async function (url) {
const data = await fetch(url, {});
return await data.json();
},
};
export default helpers;This is a JavaScript module that exports a single object helpers with a single method httpGet. The httpGet method performs an asynchronous HTTP GET request to the specified url and returns the response in JSON format.
3-Create store.js file
This code sets up a Redux store using the createStore method from the redux library.The resulting store is then exported for use in the application.
// store.js file
import { createStore, combineReducers, applyMiddleware } from "redux";
import keplerGlReducer from "kepler.gl/reducers";
import { taskMiddleware } from "react-palm/tasks";
function appReducer() {
return {};
}
const initialState = {};
const keplerReducer = keplerGlReducer.initialState({
uiState: {
activeSidePanel: null,
currentModal: null,
},
});
const reducers = combineReducers({
keplerGl: keplerReducer,
app: appReducer,
});
export default createStore(
reducers,
initialState,
applyMiddleware(taskMiddleware)
);4-App.js file
This is the main component that renders the Kepler.gl map.
4.1.Importing necessary modules:
First, React imports the required modules, including the useEffect and useState hooks, the KeplerGl component and the addDataToMap action generator from the Kepler.gl library. It also imports the useDispatch hook from the “react-redux” library to be able to update the state of the map, and helpers module which is a custom module that contains a function to retrieve data from a URL.
// App.js file
import React, { useEffect, useState } from "react";
import KeplerGl from "kepler.gl";
import { addDataToMap } from "kepler.gl/actions";
import { useDispatch } from "react-redux";
import helpers from "./helpers";4.2. Setting up the constants:
- The code then sets a constant DATA_URL which points to a JSON file containing the data to be displayed on the map.
- ‘sampleConfig’ is a constant that contains the initial configuration for the map's visual state. This includes filters that the user can interact with to manipulate the data displayed on the map.
// App.js file
const DATA_URL =
"Your data URL";
const sampleConfig = {
visState: {
filters: [
{
id: "dateFilter_id",
dataId: "date_id",
name: "",//the name of the column to be filtered
type: "timeRange",//filter type to be use
},
],
},
};4.3. Defining the App component:
The ‘dispatch’ hook is used to allow the component to dispatch actions to the Redux store. ‘data’ is set as the state and ‘setData’ is used to update it.
// App.js file
function Map() {
const dispatch = useDispatch();
const [data, setData] = useState();
const fetchData = async () => {
setData(await helpers.httpGet(DATA_URL));
};The fetchData function retrieves data from the remote URL using the helpers.httpGet method.
The first ‘useEffect’ hook is used to call ‘fetchData’ when the component is first rendered to retrieve the data.
// App.js file
useEffect(() => {
fetchData();
}, []);
useEffect(() => {
data &&
dispatch(
addDataToMap({
datasets: {
info: {
label: "RECENT EARTHQUAKES IN TURKEY AND ITS ENVIRONMENT",
id: "EARTHQUAKES",
},
data: data,
},
option: {
centerMap: true,
readOnly: false,
},
config: sampleConfig,
})
);
}, [dispatch, data]);The second ‘useEffect’ hook updates the map's state by dispatching the ‘addDataToMap’ action when the data is available. The action takes an object that includes information about the data, options, and configuration for the map.
4.4.Rendering and Exporting the component:
The component returns a Kepler.gl component with various props like id, width, height, mapboxApiAccessToken, mapStyle, etc. Finally, the component is exported as the default export.
return (
<KeplerGl
id="map"
width={window.innerWidth}
height={window.innerHeight}
mapboxApiAccessToken="Your Mapbox Access Token "
/>
);
}
export default Map;5.index.js file:
This is the entry point of the application. It renders the App component inside a Provider component from react-redux and passes the store as a prop to the Provider.
// index.js file
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./store";
import { Provider } from "react-redux";
import "./index.css";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);That’s all🎉
We created our map with data from the specified URL using the Kepler.gl library.
I appreciate you reading. Good luck! 🌞
