Advanced layers for specific data types and visualization scenarios including GeoJSON rendering, image display, and 3D point clouds.
Composite layer that automatically renders GeoJSON data using appropriate sub-layers based on geometry types.
/**
* Composite layer for rendering GeoJSON data with automatic sub-layer selection
*/
class GeoJsonLayer<FeaturePropertiesT = any> extends CompositeLayer<GeoJsonLayerProps<FeaturePropertiesT>> {
static layerName: string;
static defaultProps: DefaultProps<GeoJsonLayerProps<any>>;
}
interface GeoJsonLayerProps<FeaturePropertiesT> extends LayerProps {
data: GeoJsonData;
/** Rendering mode for point features */
pointType?: 'circle' | 'icon' | 'text';
/** Draw filled surfaces for polygons */
filled?: boolean;
/** Draw stroke outlines */
stroked?: boolean;
/** Extrude polygons to 3D */
extruded?: boolean;
/** Render as wireframe */
wireframe?: boolean;
/** Height scaling multiplier for 3D extrusion */
elevationScale?: number;
/** Use flat shading for 3D surfaces */
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;
// Fill styling
/** Accessor for fill color [r,g,b,a] (0-255) */
getFillColor?: Accessor<GeoJsonFeature<FeaturePropertiesT>, Color>;
// Stroke styling
/** Accessor for stroke color [r,g,b,a] (0-255) */
getLineColor?: Accessor<GeoJsonFeature<FeaturePropertiesT>, Color>;
/** Accessor for stroke width */
getLineWidth?: Accessor<GeoJsonFeature<FeaturePropertiesT>, number>;
// 3D extrusion
/** Accessor for extrusion height */
getElevation?: Accessor<GeoJsonFeature<FeaturePropertiesT>, number>;
// Point rendering (when pointType='circle')
/** Units for point radius */
pointRadiusUnits?: Unit;
/** Scaling multiplier for point radius */
pointRadiusScale?: number;
/** Minimum point radius in pixels */
pointRadiusMinPixels?: number;
/** Maximum point radius in pixels */
pointRadiusMaxPixels?: number;
/** Accessor for point radius */
getPointRadius?: Accessor<GeoJsonFeature<FeaturePropertiesT>, number>;
// Icon rendering (when pointType='icon')
/** Icon atlas texture */
iconAtlas?: string | Texture;
/** Icon definitions mapping */
iconMapping?: IconMapping;
/** Units for icon size */
iconSizeUnits?: Unit;
/** Scaling multiplier for icon size */
iconSizeScale?: number;
/** Minimum icon size in pixels */
iconSizeMinPixels?: number;
/** Maximum icon size in pixels */
iconSizeMaxPixels?: number;
/** Always face camera for icons */
iconBillboard?: boolean;
/** Alpha threshold for icon transparency */
iconAlphaCutoff?: number;
/** Accessor for icon name */
getIcon?: AccessorFunction<GeoJsonFeature<FeaturePropertiesT>, string>;
/** Accessor for icon size */
getIconSize?: Accessor<GeoJsonFeature<FeaturePropertiesT>, number>;
/** Accessor for icon color [r,g,b,a] (0-255) */
getIconColor?: Accessor<GeoJsonFeature<FeaturePropertiesT>, Color>;
/** Accessor for icon rotation in degrees */
getIconAngle?: Accessor<GeoJsonFeature<FeaturePropertiesT>, number>;
/** Accessor for icon pixel offset [x, y] */
getIconPixelOffset?: Accessor<GeoJsonFeature<FeaturePropertiesT>, [number, number]>;
// Text rendering (when pointType='text')
/** Font family for text */
textFontFamily?: string;
/** Font weight for text */
textFontWeight?: string | number;
/** Units for text size */
textSizeUnits?: Unit;
/** Scaling multiplier for text size */
textSizeScale?: number;
/** Minimum text size in pixels */
textSizeMinPixels?: number;
/** Maximum text size in pixels */
textSizeMaxPixels?: number;
/** Always face camera for text */
textBillboard?: boolean;
/** Character set for font generation */
textCharacterSet?: string | string[];
/** Line height multiplier for text */
textLineHeight?: number;
/** Maximum text width before wrapping */
textMaxWidth?: number;
/** Text wrapping behavior */
textWordBreak?: 'break-word' | 'break-all';
/** Accessor for text content */
getText?: AccessorFunction<GeoJsonFeature<FeaturePropertiesT>, string>;
/** Accessor for text size */
getTextSize?: Accessor<GeoJsonFeature<FeaturePropertiesT>, number>;
/** Accessor for text color [r,g,b,a] (0-255) */
getTextColor?: Accessor<GeoJsonFeature<FeaturePropertiesT>, Color>;
/** Accessor for text rotation in degrees */
getTextAngle?: Accessor<GeoJsonFeature<FeaturePropertiesT>, number>;
/** Accessor for text horizontal alignment */
getTextAnchor?: Accessor<GeoJsonFeature<FeaturePropertiesT>, 'start' | 'middle' | 'end'>;
/** Accessor for text vertical alignment */
getTextAlignmentBaseline?: Accessor<GeoJsonFeature<FeaturePropertiesT>, 'top' | 'center' | 'bottom'>;
/** Accessor for text pixel offset [x, y] */
getTextPixelOffset?: Accessor<GeoJsonFeature<FeaturePropertiesT>, [number, number]>;
// Advanced features
/** Enable experimental full 3D tesselation */
_full3d?: boolean;
}
type GeoJsonData =
| string
| GeoJSON.GeoJSON
| GeoJSON.Feature[]
| BinaryFeatureCollection
| Promise<GeoJSON.GeoJSON | GeoJSON.Feature[] | BinaryFeatureCollection>;
type GeoJsonFeature<PropertiesT = any> = GeoJSON.Feature<GeoJSON.Geometry, PropertiesT>;
interface BinaryFeatureCollection {
shape: 'binary-feature-collection';
points?: BinaryPointFeatures;
lines?: BinaryLineFeatures;
polygons?: BinaryPolygonFeatures;
}Usage Example:
import { GeoJsonLayer } from "@deck.gl/layers";
const layer = new GeoJsonLayer({
id: 'geojson',
data: 'https://example.com/data.geojson',
// Polygon styling
filled: true,
getFillColor: f => [255, 0, 0, 180],
// Point styling (circles)
pointType: 'circle',
getPointRadius: 100,
// Stroke styling
stroked: true,
getLineColor: [255, 255, 255],
getLineWidth: 2,
// 3D extrusion
extruded: true,
getElevation: f => f.properties.height || 0,
elevationScale: 1,
pickable: true
});Layer for rendering bitmap images at specified geographic boundaries with transformation and styling options.
/**
* Layer for rendering bitmap images at specified boundaries
*/
class BitmapLayer extends Layer<BitmapLayerProps> {
static layerName: string;
static defaultProps: DefaultProps<BitmapLayerProps>;
}
interface BitmapLayerProps extends LayerProps {
data: never; // BitmapLayer doesn't use data prop
/** Image source (URL, HTMLImageElement, or Texture) */
image?: string | TextureSource | null;
/** Bounding box or corner coordinates */
bounds?: BitmapBoundingBox;
/** Image coordinate system interpretation */
_imageCoordinateSystem?: CoordinateSystem;
/** Desaturation level (0-1) */
desaturate?: number;
/** Transparent pixel color [r,g,b] (0-255) */
transparentColor?: Color;
/** Tint color [r,g,b,a] (0-255) */
tintColor?: Color;
/** WebGL texture parameters */
textureParameters?: SamplerProps;
}
type BitmapBoundingBox =
| [number, number, number, number] // [left, bottom, right, top]
| [[number, number], [number, number], [number, number], [number, number]]; // Four corners
interface BitmapLayerPickingInfo extends PickingInfo {
bitmap?: {
size: {width: number; height: number};
uv: [number, number];
pixel: [number, number, number, number];
};
}
enum CoordinateSystem {
LNGLAT = 1,
METER_OFFSETS = 2,
CARTESIAN = 0
}Usage Example:
import { BitmapLayer } from "@deck.gl/layers";
const layer = new BitmapLayer({
id: 'bitmap',
image: 'https://example.com/satellite.jpg',
bounds: [-122.5, 37.7, -122.3, 37.9], // [west, south, east, north]
desaturate: 0.5,
transparentColor: [0, 0, 0],
textureParameters: {
[GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
[GL.TEXTURE_MAG_FILTER]: GL.LINEAR
}
});Layer for rendering 3D point clouds with position, color, and normal vector support.
/**
* Layer for rendering 3D point clouds
*/
class PointCloudLayer<DataT = any> extends Layer<PointCloudLayerProps<DataT>> {
static layerName: string;
static defaultProps: DefaultProps<PointCloudLayerProps<any>>;
}
interface PointCloudLayerProps<DataT> extends LayerProps {
data: LayerDataSource<DataT>;
/** Units for point radius */
radiusUnits?: Unit;
/** Point size scaling multiplier */
radiusScale?: number;
/** Minimum point size in pixels */
radiusMinPixels?: number;
/** Maximum point size in pixels */
radiusMaxPixels?: number;
/** Use flat shading (ignore normals) */
flatShading?: boolean;
/** Material properties for lighting */
material?: Material;
/** Accessor for point coordinates [x, y, z] */
getPosition?: Accessor<DataT, Position>;
/** Accessor for point color [r,g,b,a] (0-255) */
getColor?: Accessor<DataT, Color>;
/** Accessor for point normal vector [x, y, z] */
getNormal?: Accessor<DataT, [number, number, number]>;
/** Accessor for point radius */
getRadius?: Accessor<DataT, number>;
}Usage Example:
import { PointCloudLayer } from "@deck.gl/layers";
const layer = new PointCloudLayer({
id: 'point-cloud',
data: [
{
position: [0, 0, 0],
color: [255, 0, 0],
normal: [0, 0, 1],
radius: 10
}
],
getPosition: d => d.position,
getColor: d => d.color,
getNormal: d => d.normal,
getRadius: d => d.radius,
radiusUnits: 'pixels',
material: {
ambient: 0.3,
diffuse: 0.6,
shininess: 32,
specularColor: [255, 255, 255]
}
});GeoJsonLayer supports multiple input formats:
// URL string
const layer1 = new GeoJsonLayer({
data: 'https://example.com/data.geojson'
});
// GeoJSON object
const layer2 = new GeoJsonLayer({
data: {
type: 'FeatureCollection',
features: [/* ... */]
}
});
// Feature array
const layer3 = new GeoJsonLayer({
data: [
{
type: 'Feature',
geometry: {type: 'Point', coordinates: [0, 0]},
properties: {name: 'Point 1'}
}
]
});
// Binary format (for performance)
const layer4 = new GeoJsonLayer({
data: {
shape: 'binary-feature-collection',
points: {/* binary point data */},
lines: {/* binary line data */},
polygons: {/* binary polygon data */}
}
});// Geographic coordinates (longitude/latitude)
const geoLayer = new BitmapLayer({
image: 'map.jpg',
bounds: [-180, -90, 180, 90], // World bounds
_imageCoordinateSystem: CoordinateSystem.LNGLAT
});
// Four corner coordinates (for non-rectangular images)
const skewedLayer = new BitmapLayer({
image: 'skewed.jpg',
bounds: [
[-122.5, 37.7], // Bottom-left
[-122.3, 37.7], // Bottom-right
[-122.3, 37.9], // Top-right
[-122.5, 37.9] // Top-left
]
});const pointCloudLayer = new PointCloudLayer({
data: pointCloudData,
getPosition: d => d.position,
getColor: d => d.color,
getNormal: d => d.normal,
getRadius: d => d.size,
material: {
ambient: 0.2, // Ambient light contribution
diffuse: 0.8, // Diffuse light contribution
shininess: 64, // Specular highlight sharpness
specularColor: [60, 64, 70] // Specular highlight color
},
flatShading: false // Use smooth shading with normals
});All specialized layers support asynchronous data loading:
// Promise-based data loading
const geoJsonLayer = new GeoJsonLayer({
data: fetch('/api/geojson').then(r => r.json())
});
// Async/await pattern
const loadLayer = async () => {
const data = await fetch('/api/points').then(r => r.json());
return new PointCloudLayer({
data,
// ... other props
});
};