There are many approaches to making web maps, and many different data sources and use cases.
One common case for us at CarbonPlan is rendering gridded raster data on a map. These data are multi-dimensional, for example, representing multiple time points or variables. We want high performance and flexibility in rendering. We also want to use the same file formats from our analysis.
We're building @carbonplan/maps to address these needs! We'll be releasing early and often so we can use it ourselves, but it's very much in progress, so expect lots of major version bumps and breaking changes.
Check out the demo (site, code) which renders monthly temperature and precipitation data, or read on for more info on the library.
design
The core library wraps lower-level WebGL technologies to expose simple map-building components. For tiled maps, we combine mapbox-gl-js and regl. We use mapbox-gl-js for rendering vector layers and providing basic controls, and we use regl to performantly render data-driven layers. Behind the scenes, the library does some synchronization and simple state management to keep everything smooth and reactive.
We assume raster data is stored in the zarr format, an emerging standard for chunked, compressed, multi-dimensional binary data that's become popular in the scientific Python community. For tiled maps, we also leverage the ndpyramid tool for building multi-scale pyramids. Check out this Jupyter Notebook for an example of creating the required Zarr dataset. Our Raster component makes it easy to render these data.
examples
First, here's a simple map that renders a global temperature dataset at one month. The underlying dataset is a version of WorldClim stored as a zarr pyramid with 6 levels of increasing resolution. We specify the variable we want to show and the dataset's dimensions, and all other metadata is inferred the dataset.
With the same component we can render an annual dataset with a different temperature for each month, showing one month at a time via a selector. In this example, the selected month 4 can be static, or it can come from react state and the map will dynamically update!
Finally, if we want to render multiple arrays at once (and do math on them), we can specify a list for our selector. This loads all the selected arrays onto the GPU at once and lets us write custom fragment shaders that combine them (in this case, just averaging two months). While this requires writing shader code, it's a powerful and flexible way to do fast raster math for multi-dimensional maps.
We owe enormous credit to existing open source libraries in the ecosystem, in particular mapbox-gl-js and leaflet. We've also taken inspiration from the design of react-three-fiber in terms of how to wrap a rendering library with react.
license
All the original code in this repository is MIT-licensed. The library contains code from mapbox-gl-js version 1.13 (3-Clause BSD licensed). We request that you please provide attribution if reusing any of our digital content (graphics, logo, copy, etc.).
about us
CarbonPlan is a nonprofit organization that uses data and science for climate action. We aim to improve the transparency and scientific integrity of climate solutions with open data and tools. Find out more at carbonplan.org or get in touch by opening an issue or sending us an email.
We found that @carbonplan/maps demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 3 open source maintainers collaborating on the project.
Last updated on 02 Apr 2024
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.
The White House is addressing fragmented cybersecurity regulations as CISOs report spending up to 50% of their time on compliance, aiming to harmonize requirements and improve cybersecurity outcomes.
The Socket Research Team has identified a malicious Python package that is typosquatting the popular crytic-compile utility, frequently used in popular toolkits and development environments for smart contracts and crypto applications.
By Socket Research Team, Sarah Gooding - Jun 04, 2024