npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

zarr-gl

v0.3.0

Published

Custom WebGL Zarr layer for Mapbox and Maplibre

Downloads

53

Readme

zarr-gl

Custom 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.

Quickstart

npm install zarr-gl

You'll need to prepare the data using carbonplan/ndpyramid. Maybe one day this won't be necessary, but re-projecting arrays on the fly isn't cheap. There's a basic data preparation example at example/prep.py.

import { ZarrLayer } from "zarr-gl";
// or skip the npm install and just do this:
// import { ZarrLayer } from "https://cdn.jsdelivr.net/npm/[email protected]/+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.
  • [ ] Handle chunk sizes other than 128x128.
  • [ ] Appropriately handle non-float32 data.
  • [ ] Add more lifecycle events.

Examples

  1. There is a very basic example (including data prep) in the example directory.
  2. There's also a more complex React app inside demo and viewable at rainy.rdrn.me.

Contributing

I'd love input on use-cases, ideas, missing features etc. Even better if they come with code.