Comprehensive collection of layer types for visualizing different data structures, from basic geometric shapes to complex aggregations and geospatial data.
Core geometric layers for fundamental visualizations.
Renders circles at given coordinates with configurable radius and color.
class ScatterplotLayer extends Layer {
constructor(props: ScatterplotLayerProps);
}
interface ScatterplotLayerProps extends LayerProps {
/** Function to get position from data object */
getPosition?: AccessorFunction<any, Position>;
/** Function to get radius from data object */
getRadius?: AccessorFunction<any, number>;
/** Function to get fill color from data object */
getFillColor?: AccessorFunction<any, Color>;
/** Function to get line color from data object */
getLineColor?: AccessorFunction<any, Color>;
/** Function to get line width from data object */
getLineWidth?: AccessorFunction<any, number>;
/** Default radius for all points */
radiusScale?: number;
/** Minimum radius in pixels */
radiusMinPixels?: number;
/** Maximum radius in pixels */
radiusMaxPixels?: number;
/** Default line width for all points */
lineWidthScale?: number;
/** Minimum line width in pixels */
lineWidthMinPixels?: number;
/** Maximum line width in pixels */
lineWidthMaxPixels?: number;
/** Enable stroked circles */
stroked?: boolean;
/** Enable filled circles */
filled?: boolean;
/** Units for radius */
radiusUnits?: Unit;
/** Units for line width */
lineWidthUnits?: Unit;
}Renders arcs between source and target coordinates.
class ArcLayer extends Layer {
constructor(props: ArcLayerProps);
}
interface ArcLayerProps extends LayerProps {
/** Function to get source position */
getSourcePosition?: AccessorFunction<any, Position>;
/** Function to get target position */
getTargetPosition?: AccessorFunction<any, Position>;
/** Function to get arc color */
getSourceColor?: AccessorFunction<any, Color>;
/** Function to get target color */
getTargetColor?: AccessorFunction<any, Color>;
/** Function to get arc width */
getWidth?: AccessorFunction<any, number>;
/** Function to get arc height */
getHeight?: AccessorFunction<any, number>;
/** Function to get tilt angle */
getTilt?: AccessorFunction<any, number>;
/** Default width scale */
widthScale?: number;
/** Minimum width in pixels */
widthMinPixels?: number;
/** Maximum width in pixels */
widthMaxPixels?: number;
/** Units for width */
widthUnits?: Unit;
/** Enable great circle interpolation */
greatCircle?: boolean;
}Renders straight lines between source and target coordinates.
class LineLayer extends Layer {
constructor(props: LineLayerProps);
}
interface LineLayerProps extends LayerProps {
/** Function to get source position */
getSourcePosition?: AccessorFunction<any, Position>;
/** Function to get target position */
getTargetPosition?: AccessorFunction<any, Position>;
/** Function to get line color */
getColor?: AccessorFunction<any, Color>;
/** Function to get line width */
getWidth?: AccessorFunction<any, number>;
/** Default width scale */
widthScale?: number;
/** Minimum width in pixels */
widthMinPixels?: number;
/** Maximum width in pixels */
widthMaxPixels?: number;
/** Units for width */
widthUnits?: Unit;
}Renders icons/sprites at given coordinates.
class IconLayer extends Layer {
constructor(props: IconLayerProps);
}
interface IconLayerProps extends LayerProps {
/** Icon atlas texture or URL */
iconAtlas?: string | Texture;
/** Icon mapping configuration */
iconMapping?: {[key: string]: IconDefinition};
/** Function to get position */
getPosition?: AccessorFunction<any, Position>;
/** Function to get icon name */
getIcon?: AccessorFunction<any, string>;
/** Function to get icon size */
getSize?: AccessorFunction<any, number>;
/** Function to get icon angle */
getAngle?: AccessorFunction<any, number>;
/** Function to get icon color */
getColor?: AccessorFunction<any, Color>;
/** Icon size multiplier */
sizeScale?: number;
/** Minimum size in pixels */
sizeMinPixels?: number;
/** Maximum size in pixels */
sizeMaxPixels?: number;
/** Units for size */
sizeUnits?: Unit;
/** Enable alpha cutoff */
alphaCutoff?: number;
/** Billboard mode */
billboard?: boolean;
}
interface IconDefinition {
x: number;
y: number;
width: number;
height: number;
anchorX?: number;
anchorY?: number;
mask?: boolean;
}Renders text labels at given coordinates.
class TextLayer extends Layer {
constructor(props: TextLayerProps);
}
interface TextLayerProps extends LayerProps {
/** Function to get position */
getPosition?: AccessorFunction<any, Position>;
/** Function to get text content */
getText?: AccessorFunction<any, string>;
/** Function to get text size */
getSize?: AccessorFunction<any, number>;
/** Function to get text angle */
getAngle?: AccessorFunction<any, number>;
/** Function to get text color */
getColor?: AccessorFunction<any, Color>;
/** Function to get text anchor */
getTextAnchor?: AccessorFunction<any, string>;
/** Function to get alignment baseline */
getAlignmentBaseline?: AccessorFunction<any, string>;
/** Font family */
fontFamily?: string;
/** Font weight */
fontWeight?: string | number;
/** Character set for font atlas */
characterSet?: string[];
/** Font size multiplier */
sizeScale?: number;
/** Minimum size in pixels */
sizeMinPixels?: number;
/** Maximum size in pixels */
sizeMaxPixels?: number;
/** Units for size */
sizeUnits?: Unit;
/** Enable background */
background?: boolean;
/** Background color */
backgroundColor?: Color;
/** Background padding */
backgroundPadding?: [number, number, number, number];
/** Enable billboard mode */
billboard?: boolean;
/** Text outline width */
outlineWidth?: number;
/** Text outline color */
outlineColor?: Color;
}Layers for rendering complex shapes and filled areas.
Renders paths/polylines with configurable width and style.
class PathLayer extends Layer {
constructor(props: PathLayerProps);
}
interface PathLayerProps extends LayerProps {
/** Function to get path coordinates */
getPath?: AccessorFunction<any, Position[]>;
/** Function to get path color */
getColor?: AccessorFunction<any, Color>;
/** Function to get path width */
getWidth?: AccessorFunction<any, number>;
/** Default width scale */
widthScale?: number;
/** Minimum width in pixels */
widthMinPixels?: number;
/** Maximum width in pixels */
widthMaxPixels?: number;
/** Units for width */
widthUnits?: Unit;
/** Enable rounded joins */
rounded?: boolean;
/** Billboard mode */
billboard?: boolean;
/** Cap style */
capRounded?: boolean;
/** Join style */
jointRounded?: boolean;
}Renders filled polygons with optional outlines and extrusion.
class PolygonLayer extends Layer {
constructor(props: PolygonLayerProps);
}
interface PolygonLayerProps extends LayerProps {
/** Function to get polygon coordinates */
getPolygon?: AccessorFunction<any, Position[][] | Position[]>;
/** Function to get fill color */
getFillColor?: AccessorFunction<any, Color>;
/** Function to get line color */
getLineColor?: AccessorFunction<any, Color>;
/** Function to get line width */
getLineWidth?: AccessorFunction<any, number>;
/** Function to get elevation */
getElevation?: AccessorFunction<any, number>;
/** Enable filled polygons */
filled?: boolean;
/** Enable polygon outlines */
stroked?: boolean;
/** Enable 3D extrusion */
extruded?: boolean;
/** Enable wireframe mode */
wireframe?: boolean;
/** Default line width scale */
lineWidthScale?: number;
/** Minimum line width in pixels */
lineWidthMinPixels?: number;
/** Maximum line width in pixels */
lineWidthMaxPixels?: number;
/** Units for line width */
lineWidthUnits?: Unit;
/** Default elevation scale */
elevationScale?: number;
/** Units for elevation */
elevationUnits?: Unit;
/** Material for 3D rendering */
material?: Material;
}Optimized layer for rendering filled polygons without outlines.
class SolidPolygonLayer extends Layer {
constructor(props: SolidPolygonLayerProps);
}
interface SolidPolygonLayerProps extends LayerProps {
/** Function to get polygon coordinates */
getPolygon?: AccessorFunction<any, Position[][] | Position[]>;
/** Function to get fill color */
getFillColor?: AccessorFunction<any, Color>;
/** Function to get elevation */
getElevation?: AccessorFunction<any, number>;
/** Enable 3D extrusion */
extruded?: boolean;
/** Default elevation scale */
elevationScale?: number;
/** Material for 3D rendering */
material?: Material;
}Layers for specific data visualization use cases.
Renders GeoJSON features with automatic layer selection based on geometry type.
class GeoJsonLayer extends CompositeLayer {
constructor(props: GeoJsonLayerProps);
}
interface GeoJsonLayerProps extends CompositeLayerProps {
/** Function to get fill color for polygons */
getFillColor?: AccessorFunction<any, Color>;
/** Function to get line color for lines and polygon outlines */
getLineColor?: AccessorFunction<any, Color>;
/** Function to get radius for points */
getRadius?: AccessorFunction<any, number>;
/** Function to get line width */
getLineWidth?: AccessorFunction<any, number>;
/** Function to get elevation for 3D polygons */
getElevation?: AccessorFunction<any, number>;
/** Enable filled polygons */
filled?: boolean;
/** Enable stroked lines and outlines */
stroked?: boolean;
/** Enable 3D extrusion for polygons */
extruded?: boolean;
/** Enable wireframe mode */
wireframe?: boolean;
/** Point type for Point geometries */
pointType?: 'circle' | 'icon' | 'text';
/** Point radius scale */
pointRadiusScale?: number;
/** Minimum point radius in pixels */
pointRadiusMinPixels?: number;
/** Maximum point radius in pixels */
pointRadiusMaxPixels?: number;
/** Line width scale */
lineWidthScale?: number;
/** Minimum line width in pixels */
lineWidthMinPixels?: number;
/** Maximum line width in pixels */
lineWidthMaxPixels?: number;
/** Elevation scale for 3D polygons */
elevationScale?: number;
}Renders 3D point clouds with configurable point size and colors.
class PointCloudLayer extends Layer {
constructor(props: PointCloudLayerProps);
}
interface PointCloudLayerProps extends LayerProps {
/** Function to get 3D position */
getPosition?: AccessorFunction<any, Position>;
/** Function to get point color */
getColor?: AccessorFunction<any, Color>;
/** Function to get point normal vector */
getNormal?: AccessorFunction<any, [number, number, number]>;
/** Point size multiplier */
sizeScale?: number;
/** Minimum point size in pixels */
sizeMinPixels?: number;
/** Maximum point size in pixels */
sizeMaxPixels?: number;
/** Point size units */
sizeUnits?: Unit;
/** Material for lighting */
material?: Material;
}Layers for 3D visualization and volumetric data.
Renders 3D columns/bars at given positions.
class ColumnLayer extends Layer {
constructor(props: ColumnLayerProps);
}
interface ColumnLayerProps extends LayerProps {
/** Function to get position */
getPosition?: AccessorFunction<any, Position>;
/** Function to get fill color */
getFillColor?: AccessorFunction<any, Color>;
/** Function to get line color */
getLineColor?: AccessorFunction<any, Color>;
/** Function to get elevation/height */
getElevation?: AccessorFunction<any, number>;
/** Enable filled columns */
filled?: boolean;
/** Enable column outlines */
stroked?: boolean;
/** Column radius */
radius?: number;
/** Column angle */
angle?: number;
/** Vertices around column circumference */
vertices?: Position[];
/** Default elevation scale */
elevationScale?: number;
/** Material for 3D rendering */
material?: Material;
}Renders 3D grid cells for heatmap-style visualizations.
class GridCellLayer extends ColumnLayer {
constructor(props: GridCellLayerProps);
}
interface GridCellLayerProps extends ColumnLayerProps {
/** Cell size in world units */
cellSize?: number;
/** Coverage factor (0-1) */
coverage?: number;
/** Upper percentile for auto-scaling */
upperPercentile?: number;
/** Lower percentile for auto-scaling */
lowerPercentile?: number;
/** Color scale domain */
colorDomain?: [number, number];
/** Elevation scale domain */
elevationDomain?: [number, number];
/** Color range */
colorRange?: Color[];
}Renders bitmap/image data as a textured quad.
class BitmapLayer extends Layer {
constructor(props: BitmapLayerProps);
}
interface BitmapLayerProps extends LayerProps {
/** Image URL, ImageData, or texture */
image?: string | ImageData | Texture;
/** Bounding box for the image */
bounds?: BitmapBoundingBox;
/** Enable desaturated mode */
desaturate?: number;
/** Transparent color threshold */
transparentColor?: Color;
/** Tint color */
tintColor?: Color;
}
interface BitmapBoundingBox {
/** Left longitude */
left: number;
/** Top latitude */
top: number;
/** Right longitude */
right: number;
/** Bottom latitude */
bottom: number;
}import { Deck, ScatterplotLayer } from "deck.gl";
const layer = new ScatterplotLayer({
id: 'scatter',
data: [
{ coordinates: [-122.45, 37.75], size: 100, color: [255, 0, 0] },
{ coordinates: [-122.46, 37.76], size: 150, color: [0, 255, 0] }
],
getPosition: d => d.coordinates,
getRadius: d => d.size,
getFillColor: d => d.color,
radiusMinPixels: 5,
radiusMaxPixels: 100
});import { PathLayer } from "deck.gl";
const pathLayer = new PathLayer({
id: 'paths',
data: [
{
path: [[-122.45, 37.75], [-122.46, 37.76], [-122.47, 37.77]],
color: [255, 0, 0],
width: 5
}
],
getPath: d => d.path,
getColor: d => d.color,
getWidth: d => d.width,
widthMinPixels: 2
});import { GeoJsonLayer } from "deck.gl";
const geoLayer = new GeoJsonLayer({
id: 'geojson',
data: geoJsonData, // FeatureCollection
filled: true,
stroked: true,
getFillColor: [255, 200, 0, 128],
getLineColor: [255, 100, 0],
getLineWidth: 2,
lineWidthMinPixels: 1
});type AccessorFunction<DataT, ReturnT> = (
object: DataT,
info: AccessorContext
) => ReturnT;
interface AccessorContext {
index: number;
data: any;
target: any[];
}
interface Material {
ambient?: number;
diffuse?: number;
shininess?: number;
specularColor?: Color;
}
interface Texture {
width: number;
height: number;
format?: number;
type?: number;
mipmaps?: boolean;
parameters?: any;
}Layers that aggregate point data into spatial bins and visualizations.
Aggregates point data into hexagonal bins.
class HexagonLayer extends CompositeLayer {
constructor(props: HexagonLayerProps);
}
interface HexagonLayerProps extends LayerProps {
/** Function to get position from data object */
getPosition?: AccessorFunction<any, Position>;
/** Function to get weight for aggregation */
getWeight?: AccessorFunction<any, number>;
/** Function to get color value for aggregation */
getColorWeight?: AccessorFunction<any, number>;
/** Function to get elevation value for aggregation */
getElevationWeight?: AccessorFunction<any, number>;
/** Hexagon radius in meters */
radius?: number;
/** Hexagon coverage ratio */
coverage?: number;
/** Elevation scale multiplier */
elevationScale?: number;
/** Color scale domain */
colorDomain?: [number, number];
/** Elevation scale domain */
elevationDomain?: [number, number];
/** Color scale range */
colorRange?: Color[];
/** Elevation scale range */
elevationRange?: [number, number];
/** Enable 3D extrusion */
extruded?: boolean;
/** Enable upper percentile filter */
upperPercentile?: number;
/** Enable lower percentile filter */
lowerPercentile?: number;
}Aggregates point data into screen-space grid cells.
class ScreenGridLayer extends CompositeLayer {
constructor(props: ScreenGridLayerProps);
}
interface ScreenGridLayerProps extends LayerProps {
/** Function to get position from data object */
getPosition?: AccessorFunction<any, Position>;
/** Function to get weight for aggregation */
getWeight?: AccessorFunction<any, number>;
/** Grid cell size in pixels */
cellSizePixels?: number;
/** Color scale range */
colorRange?: Color[];
/** Color scale domain */
colorDomain?: [number, number];
/** Enable GPU aggregation */
gpuAggregation?: boolean;
}Renders a heatmap from point data using kernel density estimation.
class HeatmapLayer extends Layer {
constructor(props: HeatmapLayerProps);
}
interface HeatmapLayerProps extends LayerProps {
/** Function to get position from data object */
getPosition?: AccessorFunction<any, Position>;
/** Function to get weight for heatmap */
getWeight?: AccessorFunction<any, number>;
/** Heatmap intensity */
intensity?: number;
/** Color scale range */
colorRange?: Color[];
/** Color scale domain */
colorDomain?: [number, number];
/** Heatmap radius in pixels */
radiusPixels?: number;
/** Debounce timeout for aggregation */
debounceTimeout?: number;
}Generates contour lines or polygons from point data.
class ContourLayer extends CompositeLayer {
constructor(props: ContourLayerProps);
}
interface ContourLayerProps extends LayerProps {
/** Function to get position from data object */
getPosition?: AccessorFunction<any, Position>;
/** Function to get weight for contour calculation */
getWeight?: AccessorFunction<any, number>;
/** Contour cell size in meters */
cellSize?: number;
/** Contour thresholds */
contours?: ContourDefinition[];
/** Enable GPU aggregation */
gpuAggregation?: boolean;
/** Aggregator instance */
aggregation?: string;
}
interface ContourDefinition {
threshold: number;
color?: Color;
strokeWidth?: number;
}Aggregates point data into rectangular grid cells.
class GridLayer extends CompositeLayer {
constructor(props: GridLayerProps);
}
interface GridLayerProps extends LayerProps {
/** Function to get position from data object */
getPosition?: AccessorFunction<any, Position>;
/** Function to get weight for aggregation */
getWeight?: AccessorFunction<any, number>;
/** Function to get color weight */
getColorWeight?: AccessorFunction<any, number>;
/** Function to get elevation weight */
getElevationWeight?: AccessorFunction<any, number>;
/** Grid cell size in meters */
cellSize?: number;
/** Grid coverage ratio */
coverage?: number;
/** Elevation scale multiplier */
elevationScale?: number;
/** Color scale domain */
colorDomain?: [number, number];
/** Elevation scale domain */
elevationDomain?: [number, number];
/** Color scale range */
colorRange?: Color[];
/** Elevation scale range */
elevationRange?: [number, number];
/** Enable 3D extrusion */
extruded?: boolean;
}Specialized layers for geographic and geospatial data visualization.
Generic layer for rendering tiled data (raster or vector).
class TileLayer extends CompositeLayer {
constructor(props: TileLayerProps);
}
interface TileLayerProps extends LayerProps {
/** Tile URL template */
data: string | string[];
/** Tile size in pixels */
tileSize?: number;
/** Zoom offset */
zoomOffset?: number;
/** Maximum zoom level */
maxZoom?: number;
/** Minimum zoom level */
minZoom?: number;
/** Maximum cache size */
maxCacheSize?: number;
/** Maximum cache by-pass size */
maxCacheByteSize?: number;
/** Tile load refinement strategy */
refinementStrategy?: string;
/** Function to render sub layers */
renderSubLayers?: (props: any) => Layer | Layer[];
/** Tile loading error handler */
onTileError?: (error: Error) => void;
/** Tile loading handler */
onTileLoad?: (tile: any) => void;
}Renders Mapbox Vector Tiles.
class MVTLayer extends TileLayer {
constructor(props: MVTLayerProps);
}
interface MVTLayerProps extends TileLayerProps {
/** Binary tile data flag */
binary?: boolean;
/** Unique ID property */
uniqueIdProperty?: string;
/** Highlight color */
highlightColor?: Color;
/** Auto-highlight feature */
autoHighlight?: boolean;
/** Clickable feature */
clickable?: boolean;
/** Line join type */
lineJoinType?: string;
/** Line cap type */
lineCapType?: string;
/** Point type */
pointType?: string;
}Renders H3 hexagon cells.
class H3HexagonLayer extends CompositeLayer {
constructor(props: H3HexagonLayerProps);
}
interface H3HexagonLayerProps extends LayerProps {
/** Function to get H3 hex ID */
getHexagon?: AccessorFunction<any, string>;
/** Function to get fill color */
getFillColor?: AccessorFunction<any, Color>;
/** Function to get elevation */
getElevation?: AccessorFunction<any, number>;
/** Hexagon coverage ratio */
coverage?: number;
/** Enable 3D extrusion */
extruded?: boolean;
/** Elevation scale multiplier */
elevationScale?: number;
/** Enable stroked outline */
stroked?: boolean;
/** Enable filled hexagons */
filled?: boolean;
/** Line width scale */
lineWidthScale?: number;
}Renders animated trip paths with time-based visualization.
class TripsLayer extends Layer {
constructor(props: TripsLayerProps);
}
interface TripsLayerProps extends LayerProps {
/** Function to get trip path */
getPath?: AccessorFunction<any, Position[]>;
/** Function to get trip timestamps */
getTimestamps?: AccessorFunction<any, number[]>;
/** Function to get path color */
getColor?: AccessorFunction<any, Color>;
/** Function to get path width */
getWidth?: AccessorFunction<any, number>;
/** Current time for animation */
currentTime?: number;
/** Trail length in time units */
trailLength?: number;
/** Width scale multiplier */
widthScale?: number;
/** Minimum width in pixels */
widthMinPixels?: number;
/** Maximum width in pixels */
widthMaxPixels?: number;
/** Enable rounded line caps */
rounded?: boolean;
/** Fade trail over time */
fadeTrail?: boolean;
}Layers for rendering 3D models and meshes.
Renders 3D scenegraphs and models.
class ScenegraphLayer extends Layer {
constructor(props: ScenegraphLayerProps);
}
interface ScenegraphLayerProps extends LayerProps {
/** 3D model URL or scenegraph object */
scenegraph?: string | any;
/** Function to get instance position */
getPosition?: AccessorFunction<any, Position>;
/** Function to get instance color */
getColor?: AccessorFunction<any, Color>;
/** Function to get instance orientation */
getOrientation?: AccessorFunction<any, [number, number, number]>;
/** Function to get instance scale */
getScale?: AccessorFunction<any, number | [number, number, number]>;
/** Function to get instance translation */
getTranslation?: AccessorFunction<any, [number, number, number]>;
/** Function to get transform matrix */
getTransformMatrix?: AccessorFunction<any, number[]>;
/** Size scale multiplier */
sizeScale?: number;
/** Minimum size in pixels */
sizeMinPixels?: number;
/** Maximum size in pixels */
sizeMaxPixels?: number;
/** Default size */
sizeUnits?: Unit;
}Renders simple 3D meshes.
class SimpleMeshLayer extends Layer {
constructor(props: SimpleMeshLayerProps);
}
interface SimpleMeshLayerProps extends LayerProps {
/** Mesh geometry object */
mesh?: any;
/** Texture image or URL */
texture?: string | any;
/** Function to get instance position */
getPosition?: AccessorFunction<any, Position>;
/** Function to get instance color */
getColor?: AccessorFunction<any, Color>;
/** Function to get instance orientation */
getOrientation?: AccessorFunction<any, [number, number, number]>;
/** Function to get instance scale */
getScale?: AccessorFunction<any, number | [number, number, number]>;
/** Function to get instance translation */
getTranslation?: AccessorFunction<any, [number, number, number]>;
/** Function to get transform matrix */
getTransformMatrix?: AccessorFunction<any, number[]>;
/** Size scale multiplier */
sizeScale?: number;
/** Enable wireframe rendering */
wireframe?: boolean;
/** Material properties */
material?: Material;
}