deck.gl layers supporting geospatial use cases and GIS formats with WebGL2/WebGPU acceleration
npx @tessl/cli install tessl/npm-deck-gl--geo-layers@9.1.0@deck.gl/geo-layers provides a comprehensive collection of geospatial visualization layers for deck.gl, enabling developers to create interactive maps and geospatial data visualizations with WebGL2/WebGPU acceleration. It includes specialized layers for handling various geospatial data formats, spatial indexing systems, and advanced geospatial features with high-performance rendering optimized for large datasets.
npm install @deck.gl/geo-layersimport {
TileLayer,
MVTLayer,
TerrainLayer,
H3HexagonLayer,
H3ClusterLayer,
S2Layer
} from "@deck.gl/geo-layers";For CommonJS:
const {
TileLayer,
MVTLayer,
TerrainLayer,
H3HexagonLayer,
H3ClusterLayer,
S2Layer
} = require("@deck.gl/geo-layers");import { TileLayer, MVTLayer } from "@deck.gl/geo-layers";
import { GeoJsonLayer } from "@deck.gl/layers";
// Basic tile layer with GeoJSON rendering
const tileLayer = new TileLayer({
id: 'tile-layer',
data: 'https://api.tiles.mapbox.com/v4/{z}/{x}/{y}.mvt?access_token={token}',
renderSubLayers: props => new GeoJsonLayer(props),
pickable: true
});
// MVT layer for Mapbox Vector Tiles
const mvtLayer = new MVTLayer({
id: 'mvt-layer',
data: 'https://api.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token={token}',
getFillColor: [140, 170, 180],
getLineColor: [255, 255, 255],
pickable: true
});@deck.gl/geo-layers is built around several key components:
TileLayer and Tileset2D system for efficient loading and rendering of tiled dataTripsLayer for temporal path animation and movement visualizationCore tiling system for visualizing large datasets by loading and rendering only visible tiles. Supports various data formats with automatic level-of-detail management.
class TileLayer<DataT = any, ExtraPropsT extends {} = {}> extends CompositeLayer<
ExtraPropsT & Required<_TileLayerProps<DataT>>
> {
constructor(props: TileLayerProps<DataT>);
/** Check if all tiles in the current viewport are loaded */
get isLoaded(): boolean;
}
interface TileLayerProps<DataT = unknown> extends CompositeLayerProps {
/** URL template or array of templates for tile data */
data: URLTemplate;
/** Optional custom tileset implementation */
TilesetClass?: typeof Tileset2D;
/** Function to render one or more layers for each tile */
renderSubLayers?: (props: RenderSubLayersProps<DataT>) => Layer | null | LayersList;
/** Custom tile data loader function */
getTileData?: ((props: TileLoadProps) => Promise<DataT> | DataT) | null;
/** Called when all tiles in the current viewport are loaded */
onViewportLoad?: ((tiles: Tile2DHeader<DataT>[]) => void) | null;
/** Called when a tile successfully loads */
onTileLoad?: (tile: Tile2DHeader<DataT>) => void;
/** Called when a tile is cleared from cache */
onTileUnload?: (tile: Tile2DHeader<DataT>) => void;
/** Called when a tile failed to load */
onTileError?: (err: any, tile?: Tile2DHeader<DataT>) => void;
/** The bounding box of the layer's data */
extent?: number[] | null;
/** The pixel dimension of the tiles, usually a power of 2 */
tileSize?: number;
/** The max zoom level of the layer's data */
maxZoom?: number | null;
/** The min zoom level of the layer's data */
minZoom?: number | null;
/** The maximum number of tiles that can be cached */
maxCacheSize?: number | null;
/** The maximum memory used for caching tiles */
maxCacheByteSize?: number | null;
/** How the tile layer refines the visibility of tiles */
refinementStrategy?: RefinementStrategy;
/** Range of minimum and maximum heights in the tile */
zRange?: ZRange | null;
/** The maximum number of concurrent getTileData calls */
maxRequests?: number;
/** Queue tile requests until no new tiles have been requested for at least this many milliseconds */
debounceTime?: number;
/** This offset changes the zoom level at which the tiles are fetched */
zoomOffset?: number;
}Specialized layer for rendering Mapbox Vector Tiles (MVT) with automatic GeoJSON conversion and highlighting support.
class MVTLayer<FeaturePropertiesT = unknown> extends TileLayer<ParsedMvtTile> {
constructor(props: MVTLayerProps<FeaturePropertiesT>);
/** Get all rendered features from visible tiles, optionally limited by count */
getRenderedFeatures(maxFeatures?: number | null): Feature[];
}
interface MVTLayerProps<FeaturePropertiesT = unknown> extends
Omit<TileLayerProps<ParsedMvtTile>, 'data'> {
/** TileJSON specification or URL template for MVT tiles */
data: TileJson | URLTemplate;
/** Called if data is a TileJSON URL when it is successfully fetched */
onDataLoad?: ((tilejson: TileJson | null) => void) | null;
/** Needed for highlighting a feature split across two or more tiles */
uniqueIdProperty?: string;
/** A feature with ID corresponding to the supplied value will be highlighted */
highlightedFeatureId?: string | number | null;
/** Use tile data in binary format for better performance */
binary?: boolean;
/** Loaders for processing MVT data */
loaders?: any[];
}Layer for rendering 3D terrain meshes from elevation data with texture mapping and material support.
class TerrainLayer extends TileLayer<MeshAttributes> {
constructor(props: TerrainLayerProps);
}
interface TerrainLayerProps extends TileLayerProps<MeshAttributes> {
elevationData: URLTemplate;
texture?: URLTemplate;
meshMaxError?: number;
bounds?: number[] | null;
color?: Color;
elevationDecoder?: ElevationDecoder;
wireframe?: boolean;
material?: Material | boolean;
}Layers for visualizing various spatial indexing and gridding systems including H3 hexagons, S2 cells, Geohash, and Quadkeys.
class H3HexagonLayer<DataT = any> extends CompositeLayer {
constructor(props: H3HexagonLayerProps<DataT>);
}
class H3ClusterLayer<DataT = any> extends CompositeLayer {
constructor(props: H3ClusterLayerProps<DataT>);
}
class S2Layer<DataT = any> extends CompositeLayer {
constructor(props: S2LayerProps<DataT>);
}
class GeohashLayer<DataT = any> extends CompositeLayer {
constructor(props: GeohashLayerProps<DataT>);
}
class QuadkeyLayer<DataT = any> extends CompositeLayer {
constructor(props: QuadkeyLayerProps<DataT>);
}Layer for rendering 3D Tiles format data including buildings, photogrammetry, and point clouds.
class Tile3DLayer extends CompositeLayer {
constructor(props: Tile3DLayerProps);
}
interface Tile3DLayerProps extends CompositeLayerProps {
data: string;
loadOptions?: any;
onTilesetLoad?: (tileset: any) => void;
onTileLoad?: (tile: any) => void;
onTileUnload?: (tile: any) => void;
onTileError?: (tile: any, error: any) => void;
}Layer for animating trips and paths with temporal data support.
class TripsLayer<DataT = any> extends Layer<TripsLayerProps<DataT>> {
constructor(props: TripsLayerProps<DataT>);
}
interface TripsLayerProps<DataT = unknown> extends LayerProps<DataT> {
getPath?: AccessorFunction<DataT, Position[]>;
getTimestamps?: AccessorFunction<DataT, number[]>;
getColor?: AccessorFunction<DataT, Color>;
getWidth?: AccessorFunction<DataT, number>;
currentTime?: number;
trailLength?: number;
}Layer for rendering 3D mesh data with PBR material support and feature ID picking.
/**
* Layer for rendering 3D mesh data with advanced material support
* Used internally by Tile3DLayer but also available as a standalone layer
*/
class MeshLayer<DataT = any> extends SimpleMeshLayer<DataT> {
constructor(props: MeshLayerProps<DataT>);
}
interface MeshLayerProps<DataT = any> extends SimpleMeshLayerProps<DataT> {
/** PBR material object for physically-based rendering */
pbrMaterial?: any;
/** Feature IDs for picking support */
featureIds?: NumericArray | null;
}
interface SimpleMeshLayerProps<DataT = any> extends LayerProps<DataT> {
/** Mesh data with vertex attributes */
mesh: MeshAttributes;
/** Mesh texture image or URL */
texture?: string | ImageBitmap | HTMLImageElement;
/** Base color for the mesh */
getColor?: AccessorFunction<DataT, Color>;
/** Transformation matrix for mesh positioning */
getTransformMatrix?: AccessorFunction<DataT, number[]>;
/** Mesh orientation as [pitch, yaw, roll] in degrees */
getOrientation?: AccessorFunction<DataT, [number, number, number]>;
/** Scale factor for the mesh */
getScale?: AccessorFunction<DataT, [number, number, number]>;
/** Translation offset for mesh positioning */
getTranslation?: AccessorFunction<DataT, [number, number, number]>;
/** Material properties for lighting */
material?: Material | boolean;
/** Wireframe rendering mode */
wireframe?: boolean;
}
type NumericArray = Float32Array | Float64Array | Uint8Array | Uint16Array | Uint32Array | number[];Layer for rendering great circle arcs between points - now deprecated in favor of ArcLayer with greatCircle: true.
/** @deprecated Use ArcLayer with `greatCircle: true` instead */
class GreatCircleLayer<DataT = any> extends ArcLayer<DataT> {
constructor(props: GreatCircleLayerProps<DataT>);
}
interface GreatCircleLayerProps<DataT = unknown> extends ArcLayerProps<DataT> {
// Same as ArcLayerProps - maintained for backward compatibility
}Internal layer for rendering Web Map Service (WMS) imagery - subject to API changes.
/**
* Layer for rendering Web Map Service (WMS) imagery
* Note: Internal API, subject to change without notice
*/
class _WMSLayer extends CompositeLayer {
constructor(props: WMSLayerProps);
}
interface WMSLayerProps extends CompositeLayerProps {
data: string | ImageSource;
serviceType?: ImageServiceType | 'auto';
layers?: string[];
srs?: 'EPSG:4326' | 'EPSG:3857' | 'auto';
onMetadataLoad?: (metadata: ImageSourceMetadata) => void;
onMetadataLoadError?: (error: Error) => void;
}Internal base class for spatial indexing cell layers - used by H3, S2, Geohash, and Quadkey layers.
/**
* Base class for spatial indexing cell layers
* Note: Internal API, subject to change without notice
*/
class _GeoCellLayer<DataT = any> extends CompositeLayer {
constructor(props: _GeoCellLayerProps<DataT>);
/** Override to generate geometry bounds from spatial index */
indexToBounds(): Partial<_GeoCellLayer['props']> | null;
}
interface _GeoCellLayerProps<DataT = unknown> extends PolygonLayerProps<DataT> {
// Same as PolygonLayerProps - base functionality for cell layers
}Core tileset and tile management utilities for advanced use cases.
/**
* Core tileset management class for tile-based layers
* Note: Internal API, subject to change without notice
*/
class _Tileset2D<DataT = any> {
constructor(props: Tileset2DProps<DataT>);
/** Update tileset based on current viewport and get visible tiles */
update(viewport: Viewport, options?: {zRange?: ZRange; modelMatrix?: number[]}): number;
/** Get array of visible tiles for current viewport */
getVisibleTiles(): Tile2DHeader<DataT>[];
/** Check if all visible tiles are loaded */
get isLoaded(): boolean;
/** Force refresh of all tiles */
refresh(): void;
}
interface Tileset2DProps<DataT = any> {
getTileData: (tile: TileLoadProps) => Promise<DataT> | DataT;
extent?: number[] | null;
tileSize?: number;
maxZoom?: number | null;
minZoom?: number | null;
maxCacheSize?: number | null;
maxCacheByteSize?: number | null;
refinementStrategy?: RefinementStrategy;
zRange?: ZRange | null;
maxRequests?: number;
debounceTime?: number;
zoomOffset?: number;
onTileLoad?: (tile: Tile2DHeader<DataT>) => void;
onTileUnload?: (tile: Tile2DHeader<DataT>) => void;
onTileError?: (err: any, tile: Tile2DHeader<DataT>) => void;
}Utility function for processing URL templates with tile parameters.
/**
* Generate URL from template string using tile parameters
* Note: Internal API, subject to change without notice
*/
function _getURLFromTemplate(template: URLTemplate, tile: TileLoadProps): string;type URLTemplate = string | string[];
interface TileLoadProps {
x: number;
y: number;
z: number;
bbox: TileBoundingBox;
url?: string | null;
signal?: AbortSignal;
}
interface Tile2DHeader<DataT = any> {
id: string;
x: number;
y: number;
z: number;
bbox: TileBoundingBox;
isLoaded: boolean;
content: DataT | null;
}
type GeoBoundingBox = {west: number; north: number; east: number; south: number};
type NonGeoBoundingBox = {left: number; top: number; right: number; bottom: number};
type Position = [longitude: number, latitude: number] | [longitude: number, latitude: number, elevation: number];
type Color = [r: number, g: number, b: number] | [r: number, g: number, b: number, a: number];
interface ElevationDecoder {
rScaler: number;
gScaler: number;
bScaler: number;
offset: number;
}
interface TileJson {
tilejson: string;
tiles: string[];
vector_layers: any[];
attribution?: string;
scheme?: string;
maxzoom?: number;
minzoom?: number;
}
type TileBoundingBox = GeoBoundingBox | NonGeoBoundingBox;
interface RenderSubLayersProps<DataT = any> {
id: string;
data: DataT;
tile: Tile2DHeader<DataT>;
bbox: TileBoundingBox;
x: number;
y: number;
z: number;
}
type RefinementStrategy = 'never' | 'no-overlap' | 'best-available' | RefinementStrategyFunction;
type RefinementStrategyFunction = (tiles: Tile2DHeader[]) => void;
type ZRange = [minZ: number, maxZ: number];
interface MeshAttributes {
positions: {value: Float32Array; size: number};
normals?: {value: Float32Array; size: number};
texCoords?: {value: Float32Array; size: number};
colors?: {value: Uint8Array; size: number; normalized: boolean};
indices?: {value: Uint32Array; size: number};
}
interface Material {
ambient?: number;
diffuse?: number;
shininess?: number;
specularColor?: Color;
}
interface TileLayerPickingInfo<DataT = any> {
tile?: Tile2DHeader<DataT>;
sourceTile: Tile2DHeader<DataT>;
sourceTileSubLayer: Layer;
}
interface MVTLayerPickingInfo<FeaturePropertiesT = {}> extends
TileLayerPickingInfo<ParsedMvtTile> {
// MVT-specific picking information extends the base tile picking info
}
type ParsedMvtTile = Feature[] | BinaryFeatureCollection;
interface BinaryFeatureCollection {
points?: BinaryPointFeatures;
lines?: BinaryLineFeatures;
polygons?: BinaryPolygonFeatures;
}
interface BinaryPointFeatures {
positions: {value: Float64Array; size: number};
globalFeatureIds: {value: Uint32Array; size: number};
featureIds: {value: Uint32Array; size: number};
numericProps: {[key: string]: {value: Float32Array; size: number}};
properties: {[key: string]: any}[];
}
interface BinaryLineFeatures {
pathIndices: {value: Uint32Array; size: number};
positions: {value: Float64Array; size: number};
globalFeatureIds: {value: Uint32Array; size: number};
featureIds: {value: Uint32Array; size: number};
numericProps: {[key: string]: {value: Float32Array; size: number}};
properties: {[key: string]: any}[];
}
interface BinaryPolygonFeatures {
polygonIndices: {value: Uint32Array; size: number};
primitivePolygonIndices: {value: Uint32Array; size: number};
positions: {value: Float64Array; size: number};
globalFeatureIds: {value: Uint32Array; size: number};
featureIds: {value: Uint32Array; size: number};
numericProps: {[key: string]: {value: Float32Array; size: number}};
properties: {[key: string]: any}[];
}
// GeoJSON feature interfaces for compatibility
interface Feature<G = Geometry, P = any> {
type: 'Feature';
geometry: G;
properties: P;
id?: string | number;
}
interface Geometry {
type: string;
coordinates: any;
}
// Common deck.gl types
type AccessorFunction<DataT, ValueT> = (object: DataT, objectInfo?: ObjectInfo) => ValueT;
interface ObjectInfo {
index: number;
data: any;
target: any[];
}
type Layer = any; // Base deck.gl Layer class
type LayersList = Layer[];
type LayerProps<DataT = any> = any; // Base deck.gl LayerProps
type CompositeLayerProps = LayerProps;
type CompositeLayer<PropsT = {}> = any; // Base deck.gl CompositeLayer
// Internal/private types for utility APIs
interface ImageSource {
url: string;
bounds: GeoBoundingBox;
}
type ImageServiceType = 'wms' | 'wmts' | 'tms';
interface ImageSourceMetadata {
bounds: GeoBoundingBox;
layers: string[];
crs: string;
}
interface WMSLayerProps extends CompositeLayerProps {
data: string | ImageSource;
serviceType?: ImageServiceType | 'auto';
layers?: string[];
srs?: 'EPSG:4326' | 'EPSG:3857' | 'auto';
onMetadataLoad?: (metadata: ImageSourceMetadata) => void;
onMetadataLoadError?: (error: Error) => void;
}
// Spatial indexing types
type H3Index = string;
interface H3HexagonLayerProps<DataT = any> extends Omit<PolygonLayerProps<DataT>, 'getPolygon'> {
getHexagon?: AccessorFunction<DataT, H3Index>;
coverage?: number;
centerHexagon?: H3Index | null;
highPrecision?: boolean | 'auto';
}
interface H3ClusterLayerProps<DataT = any> extends Omit<PolygonLayerProps<DataT>, 'getPolygon'> {
getHexagons?: AccessorFunction<DataT, H3Index[]>;
}
interface S2LayerProps<DataT = any> extends Omit<PolygonLayerProps<DataT>, 'getPolygon'> {
getS2Token?: AccessorFunction<DataT, string>;
}
interface GeohashLayerProps<DataT = any> extends Omit<PolygonLayerProps<DataT>, 'getPolygon'> {
getGeohash?: AccessorFunction<DataT, string>;
}
interface QuadkeyLayerProps<DataT = any> extends Omit<PolygonLayerProps<DataT>, 'getPolygon'> {
getQuadkey?: AccessorFunction<DataT, string>;
}
interface PolygonLayerProps<DataT = any> extends LayerProps<DataT> {
getPolygon?: AccessorFunction<DataT, Position[][]>;
getFillColor?: AccessorFunction<DataT, Color>;
getLineColor?: AccessorFunction<DataT, Color>;
getLineWidth?: AccessorFunction<DataT, number>;
getElevation?: AccessorFunction<DataT, number>;
extruded?: boolean;
stroked?: boolean;
filled?: boolean;
wireframe?: boolean;
pickable?: boolean;
}
// Animation layer types
interface TripsLayerProps<DataT = any> extends LayerProps<DataT> {
getPath?: AccessorFunction<DataT, Position[]>;
getTimestamps?: AccessorFunction<DataT, number[]>;
getColor?: AccessorFunction<DataT, Color>;
getWidth?: AccessorFunction<DataT, number>;
currentTime?: number;
trailLength?: number;
}
// 3D Tiles types
interface Tile3DLayerProps extends CompositeLayerProps {
data: string;
loadOptions?: any;
onTilesetLoad?: (tileset: any) => void;
onTileLoad?: (tile: any) => void;
onTileUnload?: (tile: any) => void;
onTileError?: (tile: any, error: any) => void;
}