{"id":20202876,"url":"https://github.com/carderne/zarr-gl","last_synced_at":"2025-04-10T11:40:44.922Z","repository":{"id":261614406,"uuid":"870634899","full_name":"carderne/zarr-gl","owner":"carderne","description":"Custom WebGL Zarr layer for Mapbox and Maplibre","archived":false,"fork":false,"pushed_at":"2024-12-19T14:37:04.000Z","size":535,"stargazers_count":19,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T01:13:47.107Z","etag":null,"topics":["mapbox","maplibre","webgl","zarr"],"latest_commit_sha":null,"homepage":"https://rainy.rdrn.me/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carderne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-10T11:55:09.000Z","updated_at":"2025-04-04T14:49:36.000Z","dependencies_parsed_at":"2024-11-07T14:25:24.600Z","dependency_job_id":"619fbb09-a3c3-4134-bb4d-cb3cd5bee19b","html_url":"https://github.com/carderne/zarr-gl","commit_stats":null,"previous_names":["carderne/zarr-gl"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carderne%2Fzarr-gl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carderne%2Fzarr-gl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carderne%2Fzarr-gl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carderne%2Fzarr-gl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carderne","download_url":"https://codeload.github.com/carderne/zarr-gl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248210666,"owners_count":21065588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mapbox","maplibre","webgl","zarr"],"created_at":"2024-11-14T04:58:37.301Z","updated_at":"2025-04-10T11:40:44.916Z","avatar_url":"https://github.com/carderne.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# zarr-gl\n\nCustom WebGL Zarr layer for Mapbox and Maplibre.\n\nThis library allows you to load [Zarr](https://zarr.dev/) data into a [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/guides/) or [Maplibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) map.\n\nTakes inspiration from [carbonplan/maps](https://github.com/carbonplan/maps), but with two differences:\n1. A library, rather than a framework, so you can use it how you like.\n2. Adds a [Custom Layer](https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface) 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.\n\nYou can see a demo at: [rainy.rdrn.me](http://rainy.rdrn.me).\n\n\u003cimg width=\"824\" alt=\"image\" src=\"https://github.com/user-attachments/assets/0414dcd2-2b1f-4e1a-aea8-a2b715fcab56\"\u003e\n\n\n## Quickstart\n```bash\nnpm install zarr-gl\n```\n\nYou'll need to prepare the data using [carbonplan/ndpyramid](https://github.com/carbonplan/ndpyramid).\nHoping to make that unnecessary at least for use-cases where a narrow zoom-range works.\nThere's a basic data preparation example at [example/prep.py](./example/prep.py).\n\n```js\nimport { ZarrLayer } from \"zarr-gl\";\n// or skip the npm install and just do this:\n// import { ZarrLayer } from \"https://cdn.jsdelivr.net/npm/zarr-gl@0.2.0/+esm\";\n\nconst map = new mapboxgl.Map({\n  container: \"map\",\n  style: \"mapbox://styles/mapbox/standard\",\n  projection: \"mercator\",\n});\n\nconst layer = new ZarrLayer({\n  id: \"myZarrLayer\",\n  source: \"https://example.com/path/to/my.zarr\",\n  variable: \"precip\",\n  colormap: [[200, 10, 50], [30, 40, 30], [50, 10, 200]],\n  vmin: 0,\n  vmax: 100,\n  opacity: 0.8,\n  map,\n});\nmap.addLayer(layer);\n```\n\n## Roadmap\n- [x] Support a `selector` option to index into additional dimensions. Currently only 2D datasets are supported.\n- [ ] Reproject from lon/lat to EPSG:3857 on the fly\n- [ ] Handle chunk sizes other than 128x128.\n- [ ] Appropriately handle non-float32 data.\n- [ ] Add more lifecycle events.\n\n## Examples\n1. There is a very basic example (including data prep) in the [example](./example) directory.\n2. There's also a more complex React app inside [demo](./demo) and viewable at [rainy.rdrn.me](http://rainy.rdrn.me).\n\n## Contributing\nI'd love input on use-cases, ideas, missing features etc.\nEven better if they come with code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarderne%2Fzarr-gl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarderne%2Fzarr-gl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarderne%2Fzarr-gl/lists"}