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

@carbonplan/maps

v3.4.0

Published

interactive data-driven web maps

Downloads

710

Readme

carbonplan / maps

interactive data-driven webmaps — docs, demo

CI NPM Version License: MIT

background

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.

import { Map, Raster } from '@carbonplan/maps'
import { useColormap } from '@carbonplan/colormaps'

const TemperatureMap = () => {
  const colormap = useColormap('warm')

  return (
    <Map>
      <Raster
        colormap={colormap}
        clim={[-20, 30]}
        source={
          'https://storage.googleapis.com/carbonplan-scratch/map-tests/processed/temp'
        }
        variable={'temperature'}
        dimensions={['y', 'x']}
      />
    </Map>
  )
}

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!

<Map>
  <Raster
    colormap={colormap}
    clim={[-20, 30]}
    source={
      'https://storage.googleapis.com/carbonplan-scratch/map-tests/processed/temp-month'
    }
    variable={'temperature'}
    dimensions={['month', 'y', 'x']}
    selector={{ month: 4 }}
  />
</Map>

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.

<Map>
  <Raster
    colormap={colormap}
    clim={[-20, 30]}
    fillValue={-3.4e38}
    source={
      'https://storage.googleapis.com/carbonplan-scratch/map-tests/processed/temp-month'
    }
    variable={'temperature'}
    dimensions={['month', 'y', 'x']}
    selector={{ month: [1, 2] }}
    frag={`
      float rescaled = ((month_1 + month_2) / 2.0 - clim.x)/(clim.y - clim.x);
      vec4 c = texture2D(colormap, vec2(rescaled, 1.0));
      gl_FragColor = vec4(c.x, c.y, c.z, opacity);
      gl_FragColor.rgb *= gl_FragColor.a;
    `}
  />
</Map>

thanks

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.