@bbougot/ngx-deck-gl v1.0.44

ngx-deck-gl

ngx-deck-gl is an Angular binding for Uber deck.gl

deck.gl

deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.

Find more at Uber official presentation.

Demo

ngx-deck-gl has been used to showcase a real-time tweets visualizing tool here.

Usage

npm install @bbougot/ngx-deck-gl

Module declaration in your app module imports

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   FormsModule,
   DeckModule.forRoot({
     accessToken: 'ACCESS_TOKEN' // Mapbox access token
   })
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Component declaration in your HTML template

<hexagon 
   [viewState]="viewState"
   [colorRange]="colorRange"
   [lightSettings]="lightSettings"
  [data]="data"
   ></hexagon>

Attributes binding in your TS component

public viewState: ViewState = {
	latitude: 0,
	longitude: 0,
	bearing: [0],
	zoom: [4],
	pitch: [0]
};

public colorRange: number[][] = [ 
 [1, 152, 189],
 [73, 227, 206],
 [216, 254, 181],
 [254, 237, 177],
 [254, 173, 84],
 [209, 55, 78]
];

public lightSettings: LightSettings = {
	lightsPosition: [-122.45, 37.75, 8000, -122.0, 38.00, 5000],
	ambientRatio:  0.3,
	diffuseRatio: 0.5,
	specularRatio: 0.9,
	lightsStrength: [2.0, 0, 0, 0],
	numberOfLights: 3
};

public data: number[][]; // data contains geocoordinates (longitude, latitude)