or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

3d-tiles.mdanimation.mdindex.mdspatial-indexing.mdterrain.mdtile-layers.mdvector-tiles.md
tile.json

tessl/npm-deck-gl--geo-layers

deck.gl layers supporting geospatial use cases and GIS formats with WebGL2/WebGPU acceleration

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@deck.gl/geo-layers@9.1.x

To install, run

npx @tessl/cli install tessl/npm-deck-gl--geo-layers@9.1.0

index.mddocs/

@deck.gl/geo-layers

@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.

Package Information

  • Package Name: @deck.gl/geo-layers
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @deck.gl/geo-layers

Core Imports

import { 
  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");

Basic Usage

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
});

Architecture

@deck.gl/geo-layers is built around several key components:

  • Tile-based Rendering: Core TileLayer and Tileset2D system for efficient loading and rendering of tiled data
  • Format-specific Layers: Specialized layers for MVT, 3D Tiles, WMS, and terrain data formats
  • Spatial Indexing: Layers for H3 hexagons, S2 cells, Geohash, and Quadkey spatial indexing systems
  • Animation Support: TripsLayer for temporal path animation and movement visualization
  • Utility Functions: Tileset management utilities, URL templating, and coordinate transformations

Capabilities

Tile-based Data Visualization

Core 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;
}

Tile Layers

Vector Tile Rendering

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[];
}

Vector Tiles

3D Terrain Visualization

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;
}

3D Terrain

Spatial Indexing Systems

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>);
}

Spatial Indexing

3D Tiles Rendering

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;
}

3D Tiles

Animated Path Visualization

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;
}

Animation

3D Mesh Rendering

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[];

Legacy and Internal Components

GreatCircleLayer (Deprecated)

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
}

_WMSLayer (Internal)

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;
}

_GeoCellLayer (Internal)

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
}

Tileset Management Utilities (Internal)

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;
}

URL Template Processing (Internal)

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;

Core Types

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;
}