3DFLUS - Geolib Visualizer

The Geolib Visualizer is a library that extends the deck.gl framework to enable the visualization of geospatial data, currently supporting Cloud-Optimized GeoTIFF (COG) files. This library offers an efficient way to display bitmap and terrain data in applications with advanced customization options using CogBitmapLayer and CogTerrainLayer. Another developed libraries GeoImage and CogTiles enhance rendering options.

Key Features

• COG Rendering: Efficiently loads and displays Cloud-Optimized GeoTIFF files.
• Bitmap and Terrain Layers: Supports visualizing both bitmap and elevation data.
• Customizable Rendering: Allows custom color scales, opacity control, and flexible geographic bounds.

Installation

To use the Geolib Visualizer library, you need to have deck.gl and its dependencies installed.

Install the Geolib Visualizer via npm or yarn:

npm install @gisatcz/deckgl-geolib

or

yarn add @gisatcz/deckgl-geolib

For more information, visit the npm package page. You can visit the package page to explore further versions and additional information.

COG Data Preparation

For seamless integration of Geolib Visualizer library, please make sure you have followed our workflow Data Preparation Guide for converting GeoTIFFs to COG files.

Usage

Import package into project:

import geolib from '@gisatcz/deckgl-geolib'

1. COG Bitmap Layer

The CogBitmapLayer is designed for visualizing Cloud-Optimized GeoTIFF files as raster layers. The example below demonstrates its implementation, for more information and examples refer to the CogBitmapLayer.

const CogBitmapLayer = geolib.CogBitmapLayer;

const cogLayer = new CogBitmapLayer(
  id: 'cog_bitmap_name',
  rasterData:  'cog_bitmap_data_url.tif',
  isTiled: true,
  cogBitmapOptions: {
    type: 'image'
  }
);

2. COG Terrain Layer

For 3D terrain rendering, use CogTerrainLayer to visualize elevation data stored in Cloud-Optimized GeoTIFF format, for more information and examples refer to the CogTerrainLayer.

const CogTerrainLayer = geolib.CogTerrainLayer;

const cogLayer = new CogTerrainLayer(
  id: 'cog_terrain_name',
  elevationData:  'cog_terrain_data_url.tif',
  isTiled: true,
  tileSize: 256,
  meshMaxError: 1,
  operation: 'terrain+draw',
  terrainOptions: {
    type: 'terrain',
  }
);

add layer to DeckGL instance, visit deck.gl for more about deck.gl compoments.

<DeckGL
    initialViewState={INITIAL_VIEW_STATE}
    controller={true}
    layers={cogLayer} />

Development

Clone the repository and install dependencies

yarn install

Start an example

yarn start

The example is defaultly running at http://localhost:5173/

The bitmap and terrain example files are located here example/src/examples