or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

carto.mdcore-engine.mdeffects.mdextensions.mdindex.mdjson-config.mdlayers.mdmap-integration.mdreact.mdviews.mdwidgets.md
tile.json

tessl/npm-deck.gl

A suite of 3D-enabled data visualization overlays, suitable for react-map-gl

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/deck.gl@9.1.x

To install, run

npx @tessl/cli install tessl/npm-deck.gl@9.1.0

index.mddocs/

deck.gl

deck.gl is a comprehensive WebGL2/WebGPU-powered data visualization framework designed for large-scale datasets. It provides a modular architecture with 16+ specialized sub-packages including core rendering, layers (aggregation, geo, mesh), integrations (React, Mapbox, Google Maps, ArcGIS), and utilities. The framework maps data arrays into visual layers (icons, polygons, texts) with configurable views (map, first-person, orthographic), handling performant rendering, interactive events, cartographic projections, and basemap integration.

Package Information

  • Package Name: deck.gl
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install deck.gl or yarn add deck.gl

Core Imports

ESM imports:

import { Deck, Layer, MapView } from "deck.gl";

CommonJS imports:

const { Deck, Layer, MapView } = require("deck.gl");

Individual package imports for smaller bundle sizes:

import { Deck } from "@deck.gl/core";
import { ScatterplotLayer, ArcLayer } from "@deck.gl/layers";
import { DeckGL } from "@deck.gl/react";

Script tag usage:

<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>

Basic Usage

import { Deck, ScatterplotLayer, MapView } from "deck.gl";

// Create deck instance
const deck = new Deck({
  container: 'map-container',
  initialViewState: {
    longitude: -122.45,
    latitude: 37.75,
    zoom: 12
  },
  controller: true,
  layers: [
    new ScatterplotLayer({
      id: 'scatter',
      data: [
        { position: [-122.45, 37.75], color: [255, 0, 0], radius: 100 },
        { position: [-122.46, 37.76], color: [0, 255, 0], radius: 150 }
      ],
      getPosition: d => d.position,
      getColor: d => d.color,
      getRadius: d => d.radius
    })
  ]
});

Architecture

deck.gl is built around several key architectural components:

  • Core Engine: WebGL/WebGPU rendering with Deck class managing the lifecycle
  • Layer System: Modular layers for different data visualization needs (geometric, aggregation, geospatial)
  • View System: Camera and projection management (MapView, OrbitView, FirstPersonView)
  • Controller System: User interaction handling (pan, zoom, rotate)
  • Shader System: GLSL shader modules for WebGL operations and effects
  • Extension System: Pluggable layer behavior modifications (brushing, filtering, styling)
  • Integration System: Framework adapters for React, Mapbox, Google Maps, ArcGIS

Capabilities

Core Rendering Engine

The foundational WebGL/WebGPU rendering system providing the Deck class, layer management, views, and shader modules.

class Deck {
  constructor(props: DeckProps);
  setProps(props: Partial<DeckProps>): void;
  finalize(): void;
  redraw(): void;
  pickObject(opts: PickObjectOptions): PickingInfo | null;
  pickMultipleObjects(opts: PickMultipleObjectsOptions): PickingInfo[];
}

interface DeckProps {
  container?: HTMLElement | string;
  canvas?: HTMLCanvasElement | string;
  width?: number;
  height?: number;
  initialViewState?: ViewState;
  viewState?: ViewState;
  views?: View[];
  layers?: Layer[];
  effects?: Effect[];
  controller?: boolean | ControllerProps;
  onViewStateChange?: (params: ViewStateChangeParameters) => void;
  onHover?: (info: PickingInfo, event: Event) => boolean | void;
  onClick?: (info: PickingInfo, event: Event) => boolean | void;
  onDragStart?: (info: PickingInfo, event: Event) => boolean | void;
  onDrag?: (info: PickingInfo, event: Event) => boolean | void;
  onDragEnd?: (info: PickingInfo, event: Event) => boolean | void;
  onLoad?: () => void;
  onError?: (error: Error) => void;
  debug?: boolean;
  drawPickingColors?: boolean;
  _animate?: boolean;
}

Core Rendering Engine

Layer System

Comprehensive layer types for visualizing different data structures, from basic geometric shapes to complex aggregations and geospatial data.

abstract class Layer<DataT = any, PropsT = LayerProps<DataT>> {
  constructor(props: PropsT);
  setProps(props: Partial<PropsT>): void;
  getPickingInfo(params: GetPickingInfoParams): PickingInfo;
  clone(props?: Partial<PropsT>): Layer<DataT, PropsT>;
}

interface LayerProps<DataT = any> {
  id: string;
  data?: DataT;
  visible?: boolean;
  opacity?: number;
  pickable?: boolean;
  onHover?: (info: PickingInfo, event: Event) => boolean | void;
  onClick?: (info: PickingInfo, event: Event) => boolean | void;
  onDragStart?: (info: PickingInfo, event: Event) => boolean | void;
  onDrag?: (info: PickingInfo, event: Event) => boolean | void;
  onDragEnd?: (info: PickingInfo, event: Event) => boolean | void;
  coordinateSystem?: CoordinateSystem;
  coordinateOrigin?: Position;
  extensions?: LayerExtension[];
  updateTriggers?: {[key: string]: any};
  beforeId?: string;
  operation?: Operation;
}

Layer System

Views and Cameras

Camera and viewport management system supporting multiple view types for different visualization scenarios.

abstract class View {
  constructor(props: ViewProps);
  makeViewport(props: ViewportProps): Viewport;
  getViewStateId(): string;
}

class MapView extends View {
  constructor(props?: MapViewProps);
}

class OrbitView extends View {
  constructor(props?: OrbitViewProps);
}

class FirstPersonView extends View {
  constructor(props?: FirstPersonViewProps);
}

class OrthographicView extends View {
  constructor(props?: OrthographicViewProps);
}

Views and Cameras

Effects and Lighting

Visual enhancement system including lighting, shadows, and post-processing effects.

abstract class Effect {
  constructor(props?: any);
  preRender(gl: WebGLRenderingContext, params: PreRenderOptions): void;
  postRender(gl: WebGLRenderingContext, params: PostRenderOptions): void;
}

class LightingEffect extends Effect {
  constructor(props?: LightingEffectProps);
  addLight(light: AmbientLight | DirectionalLight | PointLight): void;
  removeLight(light: AmbientLight | DirectionalLight | PointLight): void;
}

class AmbientLight {
  constructor(props?: AmbientLightOptions);
}

class DirectionalLight {
  constructor(props?: DirectionalLightOptions);
}

class PointLight {
  constructor(props?: PointLightOptions);
}

Effects and Lighting

Extensions

Pluggable layer behavior modification system providing additional functionality like brushing, filtering, and styling.

abstract class LayerExtension {
  constructor(opts?: any);
  getShaders(): any;
  initializeState(context: LayerContext, extension: LayerExtension): void;
  updateState(params: UpdateParameters, extension: LayerExtension): void;
  draw(params: any, extension: LayerExtension): void;
  finalizeState(extension: LayerExtension): void;
}

Extensions

React Integration

React components and hooks for integrating deck.gl visualizations into React applications.

interface DeckGLProps extends DeckProps {
  style?: CSSProperties;
  className?: string;
}

const DeckGL: React.ForwardRefExoticComponent<
  DeckGLProps & React.RefAttributes<DeckGLRef>
>;

interface DeckGLRef {
  deck: Deck;
  pickObject(opts: PickObjectOptions): PickingInfo | null;
  pickMultipleObjects(opts: PickMultipleObjectsOptions): PickingInfo[];
}

React Integration

Widgets

Pre-built UI controls for common visualization interactions like zoom, compass navigation, and fullscreen toggle.

class ZoomWidget {
  constructor(props?: ZoomWidgetProps);
}

class CompassWidget {
  constructor(props?: CompassWidgetProps);
}

class FullscreenWidget {
  constructor(props?: FullscreenWidgetProps);
}

Widgets

Map Integration

Integration adapters for popular mapping libraries including Mapbox GL JS, Google Maps, and ArcGIS.

class MapboxOverlay {
  constructor(props?: MapboxOverlayProps);
  setProps(props: Partial<MapboxOverlayProps>): void;
  finalize(): void;
}

class GoogleMapsOverlay {
  constructor(props?: GoogleMapsOverlayProps);
  setProps(props: Partial<GoogleMapsOverlayProps>): void;
  finalize(): void;
}

Map Integration

JSON Configuration

Declarative JSON-based layer and visualization configuration system for dynamic applications.

class JSONConverter {
  constructor(configuration?: JSONConfiguration);
  convert(json: any, options?: any): any;
}

class JSONConfiguration {
  constructor(options?: any);
}

JSON Configuration

CARTO Integration

Specialized integration for CARTO platform with purpose-built layers and data source connectors.

class VectorTileLayer extends Layer {
  constructor(props: VectorTileLayerProps);
}

class H3TileLayer extends Layer {
  constructor(props: H3TileLayerProps);
}

function vectorTableSource(options: VectorTableSourceOptions): Promise<any>;
function h3TableSource(options: H3TableSourceOptions): Promise<any>;

CARTO Integration

Types

Core Types

type Position = [number, number] | [number, number, number];
type Color = [number, number, number] | [number, number, number, number];

interface PickingInfo {
  layer?: Layer;
  index: number;
  object?: any;
  x: number;
  y: number;
  coordinate?: Position;
  color?: Color;
}

interface ViewState {
  longitude?: number;
  latitude?: number;
  zoom?: number;
  bearing?: number;
  pitch?: number;
  [key: string]: any;
}

interface ViewStateChangeParameters {
  viewState: ViewState;
  viewId?: string;
  interactionState?: InteractionState;
  oldViewState?: ViewState;
}

enum COORDINATE_SYSTEM {
  LNGLAT = 1,
  METER_OFFSETS = 2,
  LNGLAT_OFFSETS = 3,
  CARTESIAN = 0
}

enum UNIT {
  METERS = 'meters',
  COMMON = 'common',
  PIXELS = 'pixels'
}

type AccessorFunction<DataT, ReturnT> = (data: DataT, index?: number) => ReturnT;

interface ControllerProps {
  dragPan?: boolean;
  dragRotate?: boolean;
  doubleClickZoom?: boolean;
  touchZoom?: boolean;
  touchRotate?: boolean;
  keyboard?: boolean;
  scrollZoom?: boolean;
  dragMode?: 'pan' | 'rotate';
  inertia?: boolean;
}

interface ViewProps {
  id?: string;
  x?: number | string;
  y?: number | string;
  width?: number | string;
  height?: number | string;
  controller?: boolean | ControllerProps;
}

interface PickObjectOptions {
  x: number;
  y: number;
  radius?: number;
  layerIds?: string[];
  viewId?: string;
}

interface PickMultipleObjectsOptions extends PickObjectOptions {
  depth?: number;
}

interface GetPickingInfoParams {
  info: PickingInfo;
  mode: string;
}

interface InteractionState {
  isDragging?: boolean;
  isPanning?: boolean;
  isRotating?: boolean;
  isZooming?: boolean;
}

interface LayerContext {
  gl: WebGLRenderingContext;
  device: any;
  viewport: Viewport;
  uniforms: any;
}

interface UpdateParameters {
  context: LayerContext;
  oldProps: any;
  props: any;
  changeFlags: ChangeFlags;
}

interface ChangeFlags {
  dataChanged?: boolean;
  propsChanged?: boolean;
  viewportChanged?: boolean;
  updateTriggersChanged?: boolean;
}