Core layer types for rendering different data structures including points, lines, polygons, 3D shapes, text, and images.
Renders data points as circles with configurable size, color, and stroke.
class ScatterplotLayer extends Layer {
constructor(props: ScatterplotLayerProps);
}
interface ScatterplotLayerProps extends LayerProps {
/** Position accessor - returns [x, y] or [x, y, z] */
getPosition: Accessor<Position>;
/** Radius accessor - returns number in specified units */
getRadius?: Accessor<number>;
/** Fill color accessor - returns [r, g, b] or [r, g, b, a] */
getFillColor?: Accessor<Color>;
/** Line color accessor for stroke */
getLineColor?: Accessor<Color>;
/** Line width accessor for stroke */
getLineWidth?: Accessor<number>;
/** Global radius scaling factor */
radiusScale?: number;
/** Minimum radius in pixels */
radiusMinPixels?: number;
/** Maximum radius in pixels */
radiusMaxPixels?: number;
/** Radius measurement units */
radiusUnits?: Unit;
/** Line width measurement units */
lineWidthUnits?: Unit;
/** Global line width scaling */
lineWidthScale?: number;
/** Minimum line width in pixels */
lineWidthMinPixels?: number;
/** Maximum line width in pixels */
lineWidthMaxPixels?: number;
/** Enable stroke rendering */
stroked?: boolean;
/** Enable fill rendering */
filled?: boolean;
/** Billboard mode - always face camera */
billboard?: boolean;
/** Enable anti-aliasing */
antialiasing?: boolean;
}Usage Examples:
import {ScatterplotLayer} from 'deck.gl';
// Basic points
new ScatterplotLayer({
id: 'points',
data: [{lat: 37.8, lng: -122.4, size: 100}],
getPosition: d => [d.lng, d.lat],
getRadius: d => d.size,
getFillColor: [255, 0, 0]
});
// Variable size and color
new ScatterplotLayer({
id: 'variable-points',
data: cities,
getPosition: d => d.coordinates,
getRadius: d => Math.sqrt(d.population) / 100,
getFillColor: d => d.population > 1000000 ? [255, 0, 0] : [0, 255, 0],
pickable: true
});Renders arcs between pairs of source and target coordinates.
class ArcLayer extends Layer {
constructor(props: ArcLayerProps);
}
interface ArcLayerProps extends LayerProps {
/** Source position accessor */
getSourcePosition: Accessor<Position>;
/** Target position accessor */
getTargetPosition: Accessor<Position>;
/** Source color accessor */
getSourceColor?: Accessor<Color>;
/** Target color accessor */
getTargetColor?: Accessor<Color>;
/** Arc width accessor */
getWidth?: Accessor<number>;
/** Arc height accessor (peak height) */
getHeight?: Accessor<number>;
/** Arc tilt accessor (rotation around axis) */
getTilt?: Accessor<number>;
/** Use great circle paths */
greatCircle?: boolean;
/** Number of segments per arc */
numSegments?: number;
/** Width scaling factor */
widthScale?: number;
/** Width measurement units */
widthUnits?: Unit;
/** Minimum width in pixels */
widthMinPixels?: number;
/** Maximum width in pixels */
widthMaxPixels?: number;
}Renders icons from a texture atlas at specified positions.
class IconLayer extends Layer {
constructor(props: IconLayerProps);
}
interface IconLayerProps extends LayerProps {
/** Position accessor */
getPosition: Accessor<Position>;
/** Icon name/key accessor */
getIcon: Accessor<string>;
/** Icon size accessor */
getSize?: Accessor<number>;
/** Icon angle accessor (radians) */
getAngle?: Accessor<number>;
/** Icon color accessor */
getColor?: Accessor<Color>;
/** Pixel offset accessor [x, y] */
getPixelOffset?: Accessor<[number, number]>;
/** Icon atlas URL or texture */
iconAtlas: string | Texture;
/** Icon mapping object */
iconMapping: {[key: string]: IconDefinition};
/** Icon size scaling */
sizeScale?: number;
/** Size measurement units */
sizeUnits?: Unit;
/** Minimum size in pixels */
sizeMinPixels?: number;
/** Maximum size in pixels */
sizeMaxPixels?: number;
/** Billboard mode */
billboard?: boolean;
/** Alpha cutoff for transparency */
alphaCutoff?: number;
}
interface IconDefinition {
x: number;
y: number;
width: number;
height: number;
anchorX?: number;
anchorY?: number;
mask?: boolean;
}Renders line segments between pairs of coordinates.
class LineLayer extends Layer {
constructor(props: LineLayerProps);
}
interface LineLayerProps extends LayerProps {
/** Source position accessor */
getSourcePosition: Accessor<Position>;
/** Target position accessor */
getTargetPosition: Accessor<Position>;
/** Source color accessor */
getSourceColor?: Accessor<Color>;
/** Target color accessor */
getTargetColor?: Accessor<Color>;
/** Line width accessor */
getWidth?: Accessor<number>;
/** Width scaling factor */
widthScale?: number;
/** Width measurement units */
widthUnits?: Unit;
/** Minimum width in pixels */
widthMinPixels?: number;
/** Maximum width in pixels */
widthMaxPixels?: number;
}Renders multi-segment paths from arrays of coordinates.
class PathLayer extends Layer {
constructor(props: PathLayerProps);
}
interface PathLayerProps extends LayerProps {
/** Path data accessor - returns array of positions */
getPath: Accessor<Position[]>;
/** Path color accessor */
getColor?: Accessor<Color>;
/** Path width accessor */
getWidth?: Accessor<number>;
/** Width scaling factor */
widthScale?: number;
/** Width measurement units */
widthUnits?: Unit;
/** Minimum width in pixels */
widthMinPixels?: number;
/** Maximum width in pixels */
widthMaxPixels?: number;
/** Round line joins */
rounded?: boolean;
/** Billboard mode for width */
billboard?: boolean;
/** Draw arrow at path end */
capRounded?: boolean;
/** Joint type for path segments */
jointRounded?: boolean;
/** Miter limit for sharp joints */
miterLimit?: number;
}Renders filled polygons with optional stroke and holes.
class PolygonLayer extends CompositeLayer {
constructor(props: PolygonLayerProps);
}
interface PolygonLayerProps extends CompositeLayerProps {
/** Polygon data accessor - returns coordinate array or GeoJSON-like object */
getPolygon: Accessor<Position[] | {coordinates: Position[][]}>;
/** Fill color accessor */
getFillColor?: Accessor<Color>;
/** Line color accessor */
getLineColor?: Accessor<Color>;
/** Line width accessor */
getLineWidth?: Accessor<number>;
/** Elevation accessor for 3D polygons */
getElevation?: Accessor<number>;
/** Enable fill rendering */
filled?: boolean;
/** Enable stroke rendering */
stroked?: boolean;
/** Enable 3D extrusion */
extruded?: boolean;
/** Enable wireframe rendering */
wireframe?: boolean;
/** Line width scale */
lineWidthScale?: number;
/** Line width units */
lineWidthUnits?: Unit;
/** Minimum line width in pixels */
lineWidthMinPixels?: number;
/** Maximum line width in pixels */
lineWidthMaxPixels?: number;
/** Elevation scale for 3D */
elevationScale?: number;
}Composite layer for rendering GeoJSON features with appropriate geometry layers.
class GeoJsonLayer extends CompositeLayer {
constructor(props: GeoJsonLayerProps);
}
interface GeoJsonLayerProps extends CompositeLayerProps {
/** Point fill color accessor */
getFillColor?: Accessor<Color>;
/** Point/line stroke color accessor */
getLineColor?: Accessor<Color>;
/** Point radius accessor */
getRadius?: Accessor<number>;
/** Line width accessor */
getLineWidth?: Accessor<number>;
/** Polygon elevation accessor */
getElevation?: Accessor<number>;
/** Point size scale */
pointRadiusScale?: number;
/** Point size units */
pointRadiusUnits?: Unit;
/** Minimum point size */
pointRadiusMinPixels?: number;
/** Maximum point size */
pointRadiusMaxPixels?: number;
/** Line width scale */
lineWidthScale?: number;
/** Line width units */
lineWidthUnits?: Unit;
/** Minimum line width */
lineWidthMinPixels?: number;
/** Maximum line width */
lineWidthMaxPixels?: number;
/** Enable polygon fill */
filled?: boolean;
/** Enable stroke rendering */
stroked?: boolean;
/** Enable 3D extrusion */
extruded?: boolean;
/** Enable point billboarding */
pointBillboard?: boolean;
/** Enable wireframe mode */
wireframe?: boolean;
/** Point type for MultiPoint rendering */
pointType?: 'circle' | 'icon';
}Renders text labels at specified positions.
class TextLayer extends Layer {
constructor(props: TextLayerProps);
}
interface TextLayerProps extends LayerProps {
/** Position accessor */
getPosition: Accessor<Position>;
/** Text content accessor */
getText: Accessor<string>;
/** Text size accessor */
getSize?: Accessor<number>;
/** Text angle accessor (radians) */
getAngle?: Accessor<number>;
/** Text color accessor */
getColor?: Accessor<Color>;
/** Pixel offset accessor [x, y] */
getPixelOffset?: Accessor<[number, number]>;
/** Background color accessor */
getBackgroundColor?: Accessor<Color>;
/** Border color accessor */
getBorderColor?: Accessor<Color>;
/** Border width accessor */
getBorderWidth?: Accessor<number>;
/** Text anchor alignment */
getTextAnchor?: Accessor<'start' | 'middle' | 'end'>;
/** Vertical alignment */
getAlignmentBaseline?: Accessor<'top' | 'center' | 'bottom'>;
/** Font family */
fontFamily?: string;
/** Font weight */
fontWeight?: number | 'normal' | 'bold';
/** Font size scaling */
sizeScale?: number;
/** Size units */
sizeUnits?: Unit;
/** Minimum size in pixels */
sizeMinPixels?: number;
/** Maximum size in pixels */
sizeMaxPixels?: number;
/** Billboard mode */
billboard?: boolean;
/** Enable background */
background?: boolean;
/** Background padding */
backgroundPadding?: [number, number, number, number];
/** Character set for font atlas */
characterSet?: string[];
/** Maximum text width for wrapping */
maxWidth?: number;
/** Word break mode */
wordBreak?: 'break-word' | 'break-all';
/** Line height multiplier */
lineHeight?: number;
}Renders georeferenced bitmap images.
class BitmapLayer extends Layer {
constructor(props: BitmapLayerProps);
}
interface BitmapLayerProps extends LayerProps {
/** Image URL or texture */
image: string | Texture | HTMLImageElement;
/** Geographic bounds of the image */
bounds: BitmapBoundingBox;
/** Desaturate the image (0-1) */
desaturate?: number;
/** Increase transparency of darker pixels */
transparentColor?: Color;
/** Tint color */
tintColor?: Color;
}
interface BitmapBoundingBox {
/** [west, south, east, north] in geographic coordinates */
bounds: [number, number, number, number];
}
type BitmapBoundingBox = [number, number, number, number];Renders 3D columns/bars at specified positions.
class ColumnLayer extends Layer {
constructor(props: ColumnLayerProps);
}
interface ColumnLayerProps extends LayerProps {
/** Position accessor */
getPosition: Accessor<Position>;
/** Fill color accessor */
getFillColor?: Accessor<Color>;
/** Line color accessor */
getLineColor?: Accessor<Color>;
/** Elevation accessor (height) */
getElevation?: Accessor<number>;
/** Line width accessor */
getLineWidth?: Accessor<number>;
/** Column radius/size accessor */
getRadius?: Accessor<number>;
/** Column angle accessor */
getAngle?: Accessor<number>;
/** Enable stroke rendering */
stroked?: boolean;
/** Enable fill rendering */
filled?: boolean;
/** Column radius scale */
radiusScale?: number;
/** Radius units */
radiusUnits?: Unit;
/** Line width scale */
lineWidthScale?: number;
/** Line width units */
lineWidthUnits?: Unit;
/** Elevation scale */
elevationScale?: number;
/** Enable wireframe mode */
wireframe?: boolean;
/** Disk resolution (circular columns) */
diskResolution?: number;
/** Number of vertices for polygon columns */
vertices?: Position[];
}Renders 3D point clouds with position, normal, and color data.
class PointCloudLayer extends Layer {
constructor(props: PointCloudLayerProps);
}
interface PointCloudLayerProps extends LayerProps {
/** Position accessor */
getPosition: Accessor<Position>;
/** Point normal accessor for lighting */
getNormal?: Accessor<[number, number, number]>;
/** Point color accessor */
getColor?: Accessor<Color>;
/** Point size accessor */
getSize?: Accessor<number>;
/** Point size scale */
sizeScale?: number;
/** Size units */
sizeUnits?: Unit;
/** Point radius in units */
radiusPixels?: number;
/** Material properties */
material?: Material;
}Renders rectangular grid cells.
class GridCellLayer extends ColumnLayer {
constructor(props: GridCellLayerProps);
}
interface GridCellLayerProps extends ColumnLayerProps {
/** Cell size accessor [width, height] */
getCellSize?: Accessor<[number, number]>;
/** Cell size scale */
cellSize?: number;
/** Coverage ratio (0-1) */
coverage?: number;
/** Cell elevation offset */
elevationOffset?: number;
/** Enable 3D extrusion */
extruded?: boolean;
}Low-level solid polygon rendering without stroke support.
class SolidPolygonLayer extends Layer {
constructor(props: SolidPolygonLayerProps);
}
interface SolidPolygonLayerProps extends LayerProps {
/** Polygon data accessor */
getPolygon: Accessor<Position[]>;
/** Fill color accessor */
getFillColor?: Accessor<Color>;
/** Elevation accessor */
getElevation?: Accessor<number>;
/** Enable 3D extrusion */
extruded?: boolean;
/** Elevation scale */
elevationScale?: number;
/** Enable wireframe mode */
wireframe?: boolean;
}type Texture = any; // WebGL texture object
interface Material {
ambient?: number;
diffuse?: number;
shininess?: number;
specularColor?: Color;
}
type LayerData = any[] | Promise<any[]> | AsyncIterable<any[]> | string;
type LayerDataSource = LayerData;