Skip to main content

Getting Started

Installation​

npm install zarr-cesium
# or
yarn add zarr-cesium

Basic Usage​

1. Initialize Cesium​

import { Viewer } from 'cesium';

const viewer = new Viewer('cesiumContainer');

Rendering 2D Scalar Data (ZarrLayerProvider)​

import { ZarrLayerProvider } from 'zarr-cesium';

const viewer = new Viewer('cesiumContainer');

const options = {
  url: 'https://example.com/data.zarr',
  variable: 'salinity',
  colormap: 'viridis',
  scale: [30, 40]
};
const layer = await ZarrLayerProvider.createLayer(viewer, options);

viewer.imageryLayers.add(layer);

Example of visualizing a Zarr dataset in a CesiumJS map using Zarr-Cesium. You can easily change the timestamp, colormap, and scale.

More details on this provider can be found in the ZarrLayerProvider documentation.

Rendering 3D Volumes (ZarrCubeProvider)​

import { ZarrCubeProvider } from 'zarr-cesium';

const cube = new ZarrCubeProvider(viewer, {
  url: 'https://example.com/ocean_temp.zarr',
  variable: 'temperature',
  bounds: { west: -20, south: 30, east: 10, north: 60 },
  colormap: 'plasma',
  verticalExaggeration: 50
});

await cube.load();

Example of visualizing a 4D Zarr dataset in a CesiumJS map as a 3D cube using Zarr-Cesium. You can easily change slices and view the cube in different ways, styles, and scales.

More details on this provider can be found in the ZarrCubeProvider documentation.

Rendering 3D Vector Fields (ZarrCubeVelocityProvider)​

import { ZarrCubeVelocityProvider } from 'zarr-cesium';

const velocity = new ZarrCubeVelocityProvider(viewer, {
  urls: {
    u: 'https://example.com/uo.zarr',
    v: 'https://example.com/vo.zarr'
  },
  variables: { u: 'uo', v: 'vo' },
  bounds: { west: -50, south: -20, east: 10, north: 20 },
  colormap: 'plasma'
});

await velocity.load();

This uses cesium-wind-layer for GPU-accelerated particle flow animations.

Example of visualizing wind-speed vector data from Zarr in a CesiumJS map using Zarr-Cesium. This dataset is from Hurricane Florence, which occurred in 2018. You can easily change the timestamp, colormap, and particle speed.

More details on this provider can be found in the ZarrCubeVelocityProvider documentation.

Next Steps​