Custom WebGL Zarr layer for Mapbox and Maplibre
npm install zarr-glCustom WebGL Zarr layer for Mapbox and Maplibre.
This library allows you to load Zarr data into a Mapbox GL JS or Maplibre GL JS map.
Takes inspiration from carbonplan/maps, but with two differences:
1. A library, rather than a framework, so you can use it how you like.
2. Adds a Custom Layer to Mapbox's GL context, rather than creating a whole separate one. Allows you to mix and match with Map styles, adjust layer ordering etc.
You can see a demo at: rainy.rdrn.me.
bash
npm install zarr-gl
`You'll need to prepare the data using carbonplan/ndpyramid.
Hoping to make that unnecessary at least for use-cases where a narrow zoom-range works.
There's a basic data preparation example at example/prep.py.
`js
import { ZarrLayer } from "zarr-gl";
// or skip the npm install and just do this:
// import { ZarrLayer } from "https://cdn.jsdelivr.net/npm/zarr-gl@0.2.0/+esm";const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/standard",
projection: "mercator",
});
const layer = new ZarrLayer({
id: "myZarrLayer",
source: "https://example.com/path/to/my.zarr",
variable: "precip",
colormap: [[200, 10, 50], [30, 40, 30], [50, 10, 200]],
vmin: 0,
vmax: 100,
opacity: 0.8,
map,
});
map.addLayer(layer);
`Roadmap
- [x] Support a selector` option to index into additional dimensions. Currently only 2D datasets are supported.See CONTRIBUTING.md for details on how to contribute.