@curev/deck-layers

A high-performance Deck.gl raster layer extension supporting custom color palettes, NoData handling, flexible bounds, and WebGL shader optimizations. Ideal for geospatial data visualization.

Installation

# npm
npm install @curev/deck-layers

# yarn
yarn add @curev/deck-layers

# pnpm
pnpm install @curev/deck-layers

Quick Start

import { RasterLayer, useDeckGL, useGlobalDeckGL, loadImage, loadPalette } from '@curev/deck-layers';

// Initialize DeckGL instance
const deck = useDeckGL();
deck.init({
  // Your DeckGL configuration
});

// Load GeoTIFF image
const image = await loadImage('your.tif');

// Create a raster layer
const rasterLayer = new RasterLayer({
  id: 'raster',
  image,
  bounds: image.bounds,
  palette: loadPalette(['#0000ff', '#00ff00', '#ffff00', '#ff0000']),
});

deck.addLayer(rasterLayer);

Main Exports & API

DeckGL Management

• useDeckGL() – Create and manage a DeckGL instance, supporting layer add/remove and property updates.
• useGlobalDeckGL – Global singleton DeckGL instance.

Raster Layer

• RasterLayer – Custom Deck.gl raster layer supporting color palettes, NoData, and flexible bounds.
• createMesh(bounds, resolution) – Generate rendering mesh from bounds and resolution.

Utility Functions

• loadImage(url) – Load GeoTIFF image, returns { width, height, data, bounds, noData, url }.
• loadPalette(palette) – Generate color palette data, supports HEX strings or RGBA arrays.
• Color conversion: hexToRGB, hexToRGBA, rgbaToVector3, rgbaToVector4, etc.
• copyToTypedArray – Typed array conversion helper.

Dependencies

• @deck.gl/core, @deck.gl/layers, @deck.gl/extensions
• @luma.gl/core, @luma.gl/engine
• @math.gl/core, @math.gl/web-mercator
• geotiff

Development

• Clone the repository
• Install Node.js LTS
• Enable Corepack: corepack enable
• Install dependencies: pnpm install
• Start development server: pnpm dev

License

Made with 💛

Published under MIT License.