ECMWF GeoZarr

GeoZarr temperature dataset (ECMWF Open Data) rendered with deck.gl-raster ZarrLayer + zarrita. Single time slice, grayscale rescale -60–40 °C. The full animated 4D version with colormap controls is documented upstream.

Installation

$ npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map-deckgl-raster

Usage

<script setup lang="ts">
import { VMap } from '@geoql/v-maplibre';
import { VLayerZarr } from '@geoql/v-maplibre/geotiff';
import * as zarr from 'zarrita';

const ZARR_URL = 'https://.../ecmwf.zarr';
const node = shallowRef<unknown>(null);

onMounted(async () => {
  const store = await zarr.withConsolidatedMetadata(
    new zarr.FetchStore(ZARR_URL),
    { format: 'v3' },
  );
  const root = await zarr.open.v3(store, { kind: 'group' });
  node.value = await zarr.open.v3(
    root.resolve('temperature_2m'),
    { kind: 'array' },
  );
});

const selection = { init_time: 0, lead_time: 0, ensemble_member: 0 };
</script>

<template>
  <VMap :options="mapOptions">
    <VLayerZarr
      v-if="node"
      id="ecmwf"
      :node="node"
      :selection="selection"
      :get-tile-data="getTileData"
      :render-tile="renderTile"
    />
  </VMap>
</template>

Components 2

<VMap /> @geoql/v-maplibre
<VLayerZarr /> @geoql/v-maplibre/geotiff

Props and events in the API reference

Edit Report

Sentinel-2 Multi-Band

AEF Mosaic

ECMWF GeoZarr

Opening Zarr store…

Rendered with @developmentseed/deck.gl-zarr. GPU rescale: -60 °C → 40 °C (grayscale).