Can Kepler.gl be used with Angular.js?

Issue

I was planning to use Kepler.gl in my Angular.js project. However, I haven't been able to find any supporting documents, tutorials or any other material to use Kepler.gl along with Angular.js.

Can Kepler.gl be used with Angular.js?

If yes, can you please share some links to such tutorials?

Solution

How to Integrate kepler.gl with angular

My development environment

• node (v14.18.2)
• npm (6.14.15)
• Angular CLI (10.1.7)
• OS (darwin x64)

Required libraries

• react (17.0.2)
• react-dom (17.0.2)
• react-redux (3.3.7)
• kepler.gl (2.5.5)
• invariant (2.2.4)
• uuid
• styled-components

npm install --save react react-dom react-redux kepler.gl invariant uuid styled-components

visit https://docs.mapbox.com/help/getting-started/access-tokens/ to genereate MapBox Access token

Code snippet

keplerGl.component.js

import {
 Component,
 OnInit,
 OnDestroy,
 OnChanges,
 AfterViewInit,
 HostListener,
} from '@angular/core';

//react-kepler
import { Provider } from 'react-redux';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as uuid from 'uuid';
import * as invariant from 'invariant';
import { KeplerGl } from 'kepler.gl';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { taskMiddleware } from 'react-palm/tasks';
import keplerGlReducer from 'kepler.gl/reducers';

interface keplerProps {
 width: number;
 height: number;
 mapboxApiAccessToken: any;
 id: string;
}

@Component({
 selector: 'kepler-gl',
 template: `<span [id]="rootDomID"></span>`,
 styleUrls: ['./kepler-gl.component.scss'],
})
export class KeplerGlComponent
 implements OnInit, OnDestroy, OnChanges, AfterViewInit {
 width: number;
 height: number;
 mapboxApiAccessToken: any = 'replaceYourAccessTokenHere'; 
 id: string = 'keplerGl';
 rootDomID: string;
 store;

 // rerendering the map on window resize events
 @HostListener('window:resize', ['$event'])
 sizeChange(event) {
   this.render();
 }

 constructor() {}

 ngOnInit(): void {
   let reducer = combineReducers({
     keplerGl: keplerGlReducer,
   });
   this.store = createStore(reducer, {}, applyMiddleware(taskMiddleware));
   this.rootDomID = uuid.v1();
 }

 ngOnChanges() {
   this.render();
 }

 ngAfterViewInit() {
   this.render();
 }

 ngOnDestroy() {
   // Uncomment if Angular 4 issue that ngOnDestroy is called AFTER DOM node removal is resolved
   ReactDOM.unmountComponentAtNode(this.getRootDomNode());
 }

 protected getRootDomNode() {
   const node = document.getElementById(this.rootDomID);
   //@ts-ignore
   invariant(node, `Node '${this.rootDomID} not found!`);
   return node;
 }

 protected getProps(): keplerProps {
   const { width, height, mapboxApiAccessToken, id } = this;
   return {
     width: width,
     height: height,
     mapboxApiAccessToken: mapboxApiAccessToken,
     id: id,
   };
 }

 private isMounted(): boolean {
   return !!this.rootDomID;
 }
 protected render() {
   this.width = window.innerWidth 
   this.height = window.innerHeight 
   if (this.isMounted()) {
     ReactDOM.render(
       React.createElement(
         Provider,
         { store: this.store },
         React.createElement(KeplerGl, this.getProps())
       ),
       this.getRootDomNode()
     );
   }
 }
}

Answered By - Birnesh Eswar