tessl/npm-deck-gl--layers

Core visualization layers for deck.gl providing 2D and 3D rendering primitives for WebGL-based data visualization

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Path and Polygon Layers

Name: tessl/npm-deck-gl--layers
Author: tessl

Specialized layers for rendering complex shapes, paths with variable width, filled regions, and polygons with holes.

Capabilities

PathLayer

Renders paths with variable width, supporting both uniform and per-segment styling for complex line visualizations.

/**
 * Layer for rendering paths with variable width and per-segment styling
 */
class PathLayer<DataT = any> extends Layer<PathLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<PathLayerProps<any>>;
}

interface PathLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Units for path width */
  widthUnits?: Unit;
  /** Scaling multiplier for width */
  widthScale?: number;
  /** Minimum width in pixels */
  widthMinPixels?: number;
  /** Maximum width in pixels */
  widthMaxPixels?: number;
  
  /** Use rounded line joints */
  jointRounded?: boolean;
  /** Use rounded line caps */
  capRounded?: boolean;
  /** Miter limit for sharp joints */
  miterLimit?: number;
  /** Render in screen space vs world space */
  billboard?: boolean;
  
  /** Experimental path type optimization */
  _pathType?: null | 'loop' | 'open';
  
  /** Accessor for path geometry - array of positions */
  getPath?: AccessorFunction<DataT, PathGeometry>;
  /** Accessor for path color - supports per-segment colors */
  getColor?: Accessor<DataT, Color | Color[]>;
  /** Accessor for path width - supports per-segment widths */
  getWidth?: Accessor<DataT, number | number[]>;
}

type PathGeometry = Position[] | {positions: Position[], closed?: boolean};

Usage Example:

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

const layer = new PathLayer({
  id: 'paths',
  data: [
    {
      path: [[0, 0], [1, 1], [2, 0]], 
      color: [255, 0, 0], 
      width: 10
    }
  ],
  getPath: d => d.path,
  getColor: d => d.color,
  getWidth: d => d.width,
  widthUnits: 'pixels',
  jointRounded: true,
  capRounded: true
});

PolygonLayer

Renders filled and/or stroked polygons with support for holes, extrusion, and material properties.

/**
 * Layer for rendering filled and stroked polygons with optional 3D extrusion
 */
class PolygonLayer<DataT = any> extends CompositeLayer<PolygonLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<PolygonLayerProps<any>>;
}

interface PolygonLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Draw filled polygon surfaces */
  filled?: boolean;
  /** Draw polygon outlines */
  stroked?: boolean;
  /** Extrude polygons to 3D */
  extruded?: boolean;
  /** Render as wireframe */
  wireframe?: boolean;
  
  /** Height scaling multiplier for extrusion */
  elevationScale?: number;
  /** Use flat shading */
  flatShading?: boolean;
  /** Material properties for 3D rendering */
  material?: Material;
  
  /** Units for line width */
  lineWidthUnits?: Unit;
  /** Scaling multiplier for stroke width */
  lineWidthScale?: number;
  /** Minimum stroke width in pixels */
  lineWidthMinPixels?: number;
  /** Maximum stroke width in pixels */
  lineWidthMaxPixels?: number;
  
  /** Accessor for polygon geometry */
  getPolygon?: AccessorFunction<DataT, PolygonGeometry>;
  /** Accessor for fill color [r,g,b,a] (0-255) */
  getFillColor?: Accessor<DataT, Color>;
  /** Accessor for stroke color [r,g,b,a] (0-255) */
  getLineColor?: Accessor<DataT, Color>;
  /** Accessor for stroke width */
  getLineWidth?: Accessor<DataT, number>;
  /** Accessor for extrusion height */
  getElevation?: Accessor<DataT, number>;
}

type PolygonGeometry = Position[] | Position[][] | {positions: Position[], holes?: Position[][]};

Usage Example:

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

const layer = new PolygonLayer({
  id: 'polygons',
  data: [
    {
      polygon: [[0, 0], [1, 0], [1, 1], [0, 1]],
      fillColor: [255, 0, 0, 128],
      elevation: 100
    }
  ],
  getPolygon: d => d.polygon,
  getFillColor: d => d.fillColor,
  getElevation: d => d.elevation,
  filled: true,
  extruded: true
});

SolidPolygonLayer

Renders solid (filled) polygons with optional 3D extrusion, optimized for performance with large polygon datasets.

/**
 * High-performance layer for rendering solid polygons with optional extrusion
 */
class SolidPolygonLayer<DataT = any> extends Layer<SolidPolygonLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<SolidPolygonLayerProps<any>>;
}

interface SolidPolygonLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Draw filled polygon surfaces */
  filled?: boolean;
  /** Extrude polygons to 3D */
  extruded?: boolean;
  /** Render as wireframe */
  wireframe?: boolean;
  
  /** Height scaling multiplier for extrusion */
  elevationScale?: number;
  /** Use flat shading */
  flatShading?: boolean;
  
  /** Enable full 3D tesselation (experimental) */
  _full3d?: boolean;
  /** Normalize polygon winding (experimental) */
  _normalize?: boolean;
  /** Use binary data format (experimental) */
  _windingOrder?: 'CW' | 'CCW';
  
  /** Accessor for polygon geometry */
  getPolygon?: AccessorFunction<DataT, PolygonGeometry>;
  /** Accessor for fill color [r,g,b,a] (0-255) */
  getFillColor?: Accessor<DataT, Color>;
  /** Accessor for extrusion height */
  getElevation?: Accessor<DataT, number>;
}

Polygon Geometry Types

Polygons support multiple geometry formats:

// Simple polygon (outer ring only)
type SimplePolygon = Position[];

// Complex polygon with holes
type ComplexPolygon = Position[][];

// Polygon with explicit structure
interface PolygonObject {
  positions: Position[];
  holes?: Position[][];
}

// Union type for all polygon formats
type PolygonGeometry = SimplePolygon | ComplexPolygon | PolygonObject;

Polygon Format Examples:

// Simple polygon (triangle)
const triangle: Position[] = [
  [0, 0], [1, 0], [0.5, 1], [0, 0]
];

// Complex polygon with hole (donut shape)
const donut: Position[][] = [
  // Outer ring
  [[0, 0], [2, 0], [2, 2], [0, 2], [0, 0]],
  // Inner hole
  [[0.5, 0.5], [1.5, 0.5], [1.5, 1.5], [0.5, 1.5], [0.5, 0.5]]
];

// Polygon object format
const polygonObj = {
  positions: [[0, 0], [2, 0], [2, 2], [0, 2], [0, 0]],
  holes: [
    [[0.5, 0.5], [1.5, 0.5], [1.5, 1.5], [0.5, 1.5], [0.5, 0.5]]
  ]
};

Material Properties

For 3D extruded polygons, you can specify material properties:

interface Material {
  ambient?: number;
  diffuse?: number;
  shininess?: number;
  specularColor?: [number, number, number];
}

Performance Considerations

PolygonLayer: General-purpose polygon rendering with full feature support
SolidPolygonLayer: Optimized for large datasets, filled polygons only
PathLayer: Best for line-based visualizations with variable width
Use appropriate layer based on your specific rendering requirements

Common Patterns

All path and polygon layers support:

Multi-format geometry: Flexible input formats for different use cases
Per-feature styling: Individual colors, widths, and elevations per data item
3D extrusion: Convert 2D shapes to 3D with height values
Performance optimization: GPU-accelerated rendering for large datasets

Install with Tessl CLI