or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

basic-layers.mdindex.mdpath-polygon-layers.mdspecialized-layers.mdtext-icon-layers.md
tile.json

index.mddocs/

@deck.gl/layers

@deck.gl/layers provides the core visualization layer classes for deck.gl, a WebGL-powered framework for large-scale data visualization. This package includes 14 main layer classes that cover common visualization primitives from 2D shapes and lines to 3D columns and complex geospatial features.

Package Information

  • Package Name: @deck.gl/layers
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @deck.gl/layers

Core Imports

import { 
  ArcLayer, 
  ScatterplotLayer, 
  TextLayer, 
  GeoJsonLayer 
} from "@deck.gl/layers";

For CommonJS:

const { 
  ArcLayer, 
  ScatterplotLayer, 
  TextLayer, 
  GeoJsonLayer 
} = require("@deck.gl/layers");

Basic Usage

import { ScatterplotLayer } from "@deck.gl/layers";

// Create a basic scatterplot layer
const layer = new ScatterplotLayer({
  id: 'my-scatterplot',
  data: [
    {position: [-122.45, 37.8], size: 100, color: [255, 0, 0]},
    {position: [-122.46, 37.81], size: 150, color: [0, 255, 0]}
  ],
  getPosition: d => d.position,
  getRadius: d => d.size,
  getFillColor: d => d.color,
  pickable: true
});

Architecture

@deck.gl/layers is built around several key concepts:

  • Base Layer Class: All layers extend the Layer class from @deck.gl/core
  • Data-Driven Rendering: Layers accept data arrays and accessor functions to map data to visual properties
  • WebGL Optimization: Layers use GPU-accelerated rendering via @luma.gl
  • Type Safety: Full TypeScript support with generic data types
  • Composite Layers: Some layers (like GeoJsonLayer, TextLayer) combine multiple primitive layers
  • Accessor Pattern: Consistent API using accessor functions or static values for visual properties

Capabilities

Basic Geometric Layers

Essential 2D and 3D geometric primitives for fundamental data visualization needs.

class ScatterplotLayer<DataT = any> extends Layer<ScatterplotLayerProps<DataT>>;
class ArcLayer<DataT = any> extends Layer<ArcLayerProps<DataT>>;
class LineLayer<DataT = any> extends Layer<LineLayerProps<DataT>>;
class ColumnLayer<DataT = any> extends Layer<ColumnLayerProps<DataT>>;

Basic Geometric Layers

Path and Polygon Layers

Specialized layers for rendering complex shapes, paths, and filled regions.

class PathLayer<DataT = any> extends Layer<PathLayerProps<DataT>>;
class PolygonLayer<DataT = any> extends Layer<PolygonLayerProps<DataT>>;
class SolidPolygonLayer<DataT = any> extends Layer<SolidPolygonLayerProps<DataT>>;

Path and Polygon Layers

Text and Icon Rendering

Layers for displaying text labels and icon symbols in visualizations.

class TextLayer<DataT = any> extends CompositeLayer<TextLayerProps<DataT>>;
class IconLayer<DataT = any> extends Layer<IconLayerProps<DataT>>;

Text and Icon Layers

Specialized Data Layers

Advanced layers for specific data types and visualization scenarios.

class GeoJsonLayer<FeaturePropertiesT = any> extends CompositeLayer<GeoJsonLayerProps<FeaturePropertiesT>>;
class BitmapLayer extends Layer<BitmapLayerProps>;
class PointCloudLayer<DataT = any> extends Layer<PointCloudLayerProps<DataT>>;

Specialized Data Layers

Common Types

// Base layer properties inherited by all layers
interface LayerProps {
  id?: string;
  data: LayerDataSource<DataT>;
  visible?: boolean;
  pickable?: boolean;
  opacity?: number;
  autoHighlight?: boolean;
}

// Common accessor types
type Accessor<DataT, ReturnT> = AccessorFunction<DataT, ReturnT> | ReturnT;
type AccessorFunction<DataT, ReturnT> = (object: DataT, info: AccessorContext) => ReturnT;

// Color and position types
type Color = [number, number, number] | [number, number, number, number];
type Position = [number, number] | [number, number, number];

// Units for size measurements
type Unit = 'meters' | 'common' | 'pixels';

// Data source types
type LayerDataSource<DataT> = DataT[] | string | Promise<DataT[]>;

Utility Functions

/**
 * Utility for efficient data range replacement in sorted arrays
 * Mutates the data array and returns insertion indices
 */
function replaceInRange({
  data: any[];
  getIndex: (d: any) => number;
  dataRange: {startRow?: number; endRow?: number};
  replace: any[];
}): {startRow: Number; endRow: number};