Specialized layers for geographic data including tile systems, vector tiles, and spatial index visualizations.
Generic tile layer with caching system for loading map tiles and other tiled data.
class TileLayer extends CompositeLayer {
constructor(props: TileLayerProps);
}
interface TileLayerProps extends CompositeLayerProps {
/** Tile URL template with {x}, {y}, {z} placeholders */
data: string | string[];
/** Function to render each tile */
renderSubLayers: (props: TileSubLayerProps) => Layer[];
/** Tile size in pixels */
tileSize?: number;
/** Maximum zoom level */
maxZoom?: number;
/** Minimum zoom level */
minZoom?: number;
/** Maximum number of concurrent requests */
maxRequests?: number;
/** Maximum cache size */
maxCacheSize?: number;
/** Zoom offset for tile calculation */
zoomOffset?: number;
/** Custom tile bounds */
extent?: [number, number, number, number];
/** Refinement strategy */
refinementStrategy?: 'best-available' | 'no-overlap' | 'never';
/** Callback when tile loads */
onTileLoad?: (tile: any) => void;
/** Callback when tile errors */
onTileError?: (error: Error, tile: any) => void;
/** Get tile data from URL */
getTileData?: (params: {url: string, x: number, y: number, z: number, signal?: AbortSignal}) => Promise<any>;
}
interface TileSubLayerProps {
/** Tile bounding box */
bbox: {west: number, south: number, east: number, north: number};
/** Tile index */
index: {x: number, y: number, z: number};
/** Tile data */
data: any;
/** Whether tile is visible */
visible: boolean;
/** Tile loading state */
isLoaded: boolean;
}Renders Mapbox Vector Tiles with efficient styling and interaction.
class MVTLayer extends TileLayer {
constructor(props: MVTLayerProps);
}
interface MVTLayerProps extends TileLayerProps {
/** Point fill color accessor */
getFillColor?: Accessor<Color>;
/** Line color accessor */
getLineColor?: Accessor<Color>;
/** Line width accessor */
getLineWidth?: Accessor<number>;
/** Point radius accessor */
getPointRadius?: Accessor<number>;
/** Text content accessor */
getText?: Accessor<string>;
/** Text size accessor */
getTextSize?: Accessor<number>;
/** Text color accessor */
getTextColor?: Accessor<Color>;
/** Line width scale */
lineWidthScale?: number;
/** Point radius scale */
pointRadiusScale?: number;
/** Enable fill rendering */
filled?: boolean;
/** Enable stroke rendering */
stroked?: boolean;
/** Enable point rendering */
pointType?: 'circle' | 'icon';
/** Binary data handling */
binary?: boolean;
/** Unique key for features */
uniqueIdProperty?: string;
/** Highlight color */
highlightColor?: Color;
/** Auto-highlight on hover */
autoHighlight?: boolean;
}Renders H3 spatial index hexagons for hierarchical geospatial analysis.
class H3HexagonLayer extends Layer {
constructor(props: H3HexagonLayerProps);
}
interface H3HexagonLayerProps extends LayerProps {
/** H3 hexagon index accessor */
getHexagon: Accessor<string>;
/** Fill color accessor */
getFillColor?: Accessor<Color>;
/** Elevation accessor */
getElevation?: Accessor<number>;
/** Line color accessor */
getLineColor?: Accessor<Color>;
/** Line width accessor */
getLineWidth?: Accessor<number>;
/** Enable filled hexagons */
filled?: boolean;
/** Enable hexagon stroke */
stroked?: boolean;
/** Enable 3D extrusion */
extruded?: boolean;
/** Coverage ratio (0-1) */
coverage?: number;
/** Elevation scale */
elevationScale?: number;
/** Line width scale */
lineWidthScale?: number;
/** Material properties */
material?: Material;
}Aggregates and visualizes clustered data using H3 spatial indexing.
class H3ClusterLayer extends CompositeLayer {
constructor(props: H3ClusterLayerProps);
}
interface H3ClusterLayerProps extends CompositeLayerProps {
/** Position accessor */
getPosition: Accessor<Position>;
/** Weight accessor */
getWeight?: Accessor<number>;
/** H3 resolution (0-15) */
resolution?: number;
/** Color range */
colorRange?: Color[];
/** Enable 3D extrusion */
extruded?: boolean;
/** Coverage ratio */
coverage?: number;
/** Elevation scale */
elevationScale?: number;
/** Aggregation operation */
aggregation?: 'SUM' | 'MEAN' | 'COUNT';
}Renders Google S2 geometry cells for spherical spatial indexing.
class S2Layer extends Layer {
constructor(props: S2LayerProps);
}
interface S2LayerProps extends LayerProps {
/** S2 token accessor */
getS2Token: Accessor<string>;
/** Fill color accessor */
getFillColor?: Accessor<Color>;
/** Elevation accessor */
getElevation?: Accessor<number>;
/** Enable filled rendering */
filled?: boolean;
/** Enable stroke rendering */
stroked?: boolean;
/** Enable 3D extrusion */
extruded?: boolean;
/** Coverage ratio */
coverage?: number;
/** Elevation scale */
elevationScale?: number;
}Visualizes Quadkey (Bing Maps) tile boundaries and data.
class QuadkeyLayer extends Layer {
constructor(props: QuadkeyLayerProps);
}
interface QuadkeyLayerProps extends LayerProps {
/** Quadkey string accessor */
getQuadkey: Accessor<string>;
/** Fill color accessor */
getFillColor?: Accessor<Color>;
/** Elevation accessor */
getElevation?: Accessor<number>;
/** Line color accessor */
getLineColor?: Accessor<Color>;
/** Enable fill */
filled?: boolean;
/** Enable stroke */
stroked?: boolean;
/** Enable 3D extrusion */
extruded?: boolean;
/** Coverage ratio */
coverage?: number;
/** Elevation scale */
elevationScale?: number;
}Renders Geohash cells for geographic data partitioning.
class GeohashLayer extends Layer {
constructor(props: GeohashLayerProps);
}
interface GeohashLayerProps extends LayerProps {
/** Geohash string accessor */
getGeohash: Accessor<string>;
/** Fill color accessor */
getFillColor?: Accessor<Color>;
/** Elevation accessor */
getElevation?: Accessor<number>;
/** Line color accessor */
getLineColor?: Accessor<Color>;
/** Enable fill */
filled?: boolean;
/** Enable stroke */
stroked?: boolean;
/** Enable 3D extrusion */
extruded?: boolean;
/** Coverage ratio */
coverage?: number;
/** Elevation scale */
elevationScale?: number;
}Renders great circle paths between geographic coordinates.
class GreatCircleLayer extends ArcLayer {
constructor(props: GreatCircleLayerProps);
}
interface GreatCircleLayerProps extends ArcLayerProps {
/** Always use great circle calculation */
greatCircle: true;
/** Number of segments for smooth curves */
numSegments?: number;
}Animated visualization of moving objects along paths over time.
class TripsLayer extends PathLayer {
constructor(props: TripsLayerProps);
}
interface TripsLayerProps extends PathLayerProps {
/** Current animation time */
currentTime?: number;
/** Trail length in time units */
trailLength?: number;
/** Time accessor from path data */
getTimestamps?: Accessor<number[]>;
/** Fade trail over time */
fadeTrail?: boolean;
}Renders 3D terrain meshes from elevation data.
class TerrainLayer extends TileLayer {
constructor(props: TerrainLayerProps);
}
interface TerrainLayerProps extends TileLayerProps {
/** Elevation data URL template */
elevationData: string;
/** Texture URL template */
texture?: string;
/** Elevation decoder for tile data */
elevationDecoder?: {
rScaler: number;
gScaler: number;
bScaler: number;
offset: number;
};
/** Terrain mesh resolution */
meshMaxError?: number;
/** Elevation exaggeration */
elevationScale?: number;
/** Terrain color */
color?: Color;
/** Enable wireframe mode */
wireframe?: boolean;
/** Material properties */
material?: Material;
}Renders 3D tilesets (Cesium 3D Tiles format) for large-scale 3D data.
class Tile3DLayer extends Layer {
constructor(props: Tile3DLayerProps);
}
interface Tile3DLayerProps extends LayerProps {
/** 3D tileset URL */
data: string;
/** Point cloud color accessor */
getPointColor?: Accessor<Color>;
/** Point size accessor */
getPointSize?: Accessor<number>;
/** Loading callback */
onTilesetLoad?: (tileset: any) => void;
/** Tile load callback */
onTileLoad?: (tileHeader: any) => void;
/** Error callback */
onTileError?: (tile: any, message: string) => void;
/** Point size scaling */
pointSize?: number;
/** Color scheme for point clouds */
colorFormat?: 'RGB' | 'RGBA';
}Usage Examples:
import {Deck, TileLayer, MVTLayer, H3HexagonLayer, BitmapLayer} from 'deck.gl';
// Raster tile layer
const tileLayer = new TileLayer({
id: 'tiles',
data: 'https://tile-server.com/{z}/{x}/{y}.png',
minZoom: 0,
maxZoom: 18,
tileSize: 256,
renderSubLayers: props => {
const {bbox, data, tile} = props;
return new BitmapLayer({
...props,
image: data,
bounds: [bbox.west, bbox.south, bbox.east, bbox.north]
});
}
});
// Vector tile layer
const mvtLayer = new MVTLayer({
id: 'mvt',
data: 'https://tiles.com/{z}/{x}/{y}.mvt',
getFillColor: f => f.properties.color,
getLineColor: [255, 255, 255],
getLineWidth: 1,
filled: true,
stroked: true
});
// H3 hexagon visualization
const h3Layer = new H3HexagonLayer({
id: 'h3-hexagons',
data: h3Data,
getHexagon: d => d.hex,
getFillColor: d => d.color,
getElevation: d => d.value,
filled: true,
extruded: true,
coverage: 0.8,
elevationScale: 100
});
// Animated trips
const tripsLayer = new TripsLayer({
id: 'trips',
data: tripsData,
getPath: d => d.coordinates,
getTimestamps: d => d.timestamps,
getColor: [255, 0, 0],
getWidth: 5,
currentTime: animationTime,
trailLength: 600,
fadeTrail: true
});interface TileIndex {
x: number;
y: number;
z: number;
}
interface TileBoundingBox {
west: number;
south: number;
east: number;
north: number;
}