How to Integrate Kepler GL inside an Angular Application

by Vennesh Kari

For several of our internal data analysis projects at Xylem, our Xylem Data Science team has had a need to analyze very large internal data sets geo-spatially at a mass scale.

We’ve found that one of the most cost-effective ways to do this is to use a tool called Kepler.gl. Our internal company web application our team provides to internal staff are Angular based. We found it quite difficult to integrate Kepler.gl, which is a React based tool, into our Angular frameworks.

This blog post outlines how we were ale to integrate Kepler.gl into our internal angular web application. Our hope, by publishing this blog, is to make it easier for others facing the same challenge.

We have been super excited for the flexibility this has afforded us in our internal company analytics use cases. We are looking forward to future efforts to getting Kepler working with our strategic partner Esri’s offerings and/or doing something similar with Esri’s suite of geospatial tooling.

What is Kepler GL?

Kepler.gl was created by the data visualization team of Uber. Its purpose was to allow for large-scale geographic data sets to be explored and analyzed by developers and data scientists more easily. To create interactive maps with several layers and overlays. Additionally, Kepler.gl offers a user-friendly interface.

Kepler.gl is constructed on top of React and Map box GL. Web apps, Jupyter notebooks, and platforms for data visualization are just a few of the frameworks and programs it can be linked into.

Steps for embedding kepler.gl inside an Angular application

Kepler.gl is a Redux-connected component. Kepler uses Redux to manage stateful information. First to start, you need to add the Kepler.gl UI component and mount the Kepler.gl reducer.

We must create three things here.

1. Install the required libraries.

2. Change the compiler options.

3. Create Store and Reducer.

4. Create a React Component.

1. Install the required libraries.

We need to install react libraries by using following commands:

Once the libraries are successfully installed proceed to next step

2. Change the Compiler Options:

We need to change the tsconfig.json file like below:

Once we have completed this step, we can go to next step.

3. Create Store and Reducer:

To connect kepler.gl components to our application we need to get the reducer of kepler by using import like below

Redux Reducer: keplerGlReducer imported from kepler.gl/reducers

We will be creating custom reducer using store.ts file like below:

4. Create a React Component:

We will create a .tsx file which will be our react component like below:

We can see we need mainly the following things for KeplerGL component.

• Id: It can be anything.
• Store: This is like the store which we have created for our reducer.
• Width and height are the dimensions of our map.
• mapboxApiAccessToken: This is the map box token which we need to pass in order to view the maps.

We can see since it is redux component, we need to return it in a Provider which is compulsory.

Once we are done with the above steps we will now integrate with an Angular Component.

For this we will use ReactDom.render() function and React.createElement() function like below

Since React renders its element in a particular DOM id we will be using the viewChild property of angular like below:

We can see in template has been given like #keplerMap which is where exactly our react component will be rendered so the name should be same for ViewChild property as well.

Summary:

1. Install all require libraries like keplergl, react, react-dom and react-redux using npm install command.

2. Change the compiler options in tsconfig.json file like mentioned above.

3. Create a store.ts file and create a custom Kepler reducer like shown above.

4. Create a .tsx file of any name which will be a React component which have the KeplerGL Component the needs to be rendered.

5. Finally using ReactDom.render() and React.createElement() functions inside an Angular Component render the React component using ViewChild and ElementRef properties like shown above.