zarr-layer

Render Zarr datasets on the GPU

Maintained by CarbonPlan

A custom layer from CarbonPlan that renders Zarr datasets, such as climate model output, in MapLibre GL JS and Mapbox GL JS, with GPU color maps, dimension selectors and custom fragment shaders.

Live demo

zarr-layer running on MapLibre GL JS in your browser

Loading the map…

Demo code

import { ZarrLayer } from "@carbonplan/zarr-layer";
import type { PluginDemo } from "../types";

export default {
  center: [10, 30],
  zoom: 1.3,
  run({ map }) {
    // Daily maximum temperature from a CMIP6 climate model, read from a public Zarr
    // pyramid on CarbonPlan's S3 bucket and colored on the GPU.
    const layer = new ZarrLayer({
      id: "tasmax",
      source:
        "https://carbonplan-benchmarks.s3.us-west-2.amazonaws.com/data/NEX-GDDP-CMIP6/ACCESS-CM2/historical/r1i1p1f1/tasmax/tasmax_day_ACCESS-CM2_historical_r1i1p1f1_gn/pyramids-v2-4326-True-128-1-0-0-f4-0-0-0-gzipL1-100",
      variable: "tasmax",
      zarrVersion: 2,
      selector: { time: 0 },
      clim: [240, 315], // Kelvin
      colormap: [
        "#313695",
        "#4575b4",
        "#74add1",
        "#abd9e9",
        "#fee090",
        "#fdae61",
        "#f46d43",
        "#d73027",
        "#a50026",
      ],
      opacity: 0.8,
    });
    map.addLayer(layer, "boundary_3");
  },
} satisfies PluginDemo;