@dhi-gras/layers-gl

LayersGL

A WebGL-powered visualization of wind power using custom Mapbox Layers. Capable of rendering up to 1 million wind particles at 60fps.

Usage

npm install --save @dhi-gras/layers-gl

import {Map} from 'mapboxgl';
import {sampleFill, particles, source, arrows} from '@dhi-gras/windgl';

// 1. Create a source
const windSource = source('http://url/to/backend');

const map = new Map(...);

map.addLayer(sampleFill({
  id: 'windbackground', // required
  source: windSource, // required
  'sample-fill-opacity': 0.8 // optional
}));

map.addLayer(particles({
  id: 'particles',
  source: windSource, // best to share the same source between all layers
  'particle-speed': ['interpolate', ['zoom'], 0, 0.5, 10, 0.8]
  // you can use mapbox style expressions
}));

map.addLayer(arrows({
    id: 'arrows',
    source: windSource
}), "waterway-label"); // inserting the layer in the middle of the layer stack is supported

Layers

This package offers several ways to visualize wind speed.

Sample Fill

This layer will use a color map to show the wind speed at each pixel (interpolated from the data set). You can customize it with the following properties:

sample-fill-color

A color value. You can interpolate based on zoom or using data-driven styling (["get", "speed"] will get the speed at the current pixel). The default value is a nice color scale:

[
  "interpolate",
  ["linear"],
  ["get", "speed"],
  0.0,
  "#3288bd",
  10,
  "#66c2a5",
  20,
  "#abdda4",
  30,
  "#e6f598",
  40,
  "#fee08b",
  50,
  "#fdae61",
  60,
  "#f46d43",
  100.0,
  "#d53e4f"
]

sample-opacity

A number between 0 and 1. Indicates the global opacity of the layer. You can use zoom for styling.

Particles

A particle layer showing wind speed by animating particles based on the wind speed. You can customize it with the following properties:

particle-color

A color value. You can interpolate based on zoom or using data-driven styling (["get", "speed"] will get the speed at the current particle). The default value is white.

particle-speed

A positive number. Indicates how quickly the particles move (i.e. is a multiplier for the speed vector from the dataset). Can be interpolated based on zoom levels. Default is 0.75.

You can adjust the properties by calling setProperty(property, value).

Arrows

A vector field layer. You can customize it with the following properties:

arrow-min-size

A positive number. In general, this layer will attempt to draw an arrow at every grid point of the underlying data. However, sometimes that would result in really tiny arrows. So if the size of the arrow would be less than this limit, we will switch to interpolation and show a larger arrow aggregating multiple values. Default is 40px.

arrow-color

A color value. You can interpolate based on zoom or using data-driven styling (["get", "speed"] will get the speed at the current grid point). The default value is white.

arrow-halo-color

A color value. You can interpolate based on zoom. The color of an outline drawn around the arrow. Defaults to transparent.

Data

This visualization is designed to visualize wind speed data based on a regular grid - such that is typically available from forecast models. This data is encoded in a texture in plate carrée projection where the R channel corresponds to x (or u), and the G channel corresponds to y (or v). However, these encodings are relative to the total observed range which must be encoded in an accompanying JSON file:

{
  "source": "http://nomads.ncep.noaa.gov",
  "date": "2016-11-20T00:00Z",
  "width": 360,
  "height": 180,
  "uMin": -21.32,
  "uMax": 26.8,
  "vMin": -21.57,
  "vMax": 21.42,
  "tiles": ["https://example.com/demo/wind/{z}/{x}/{y}.png"]
}

The format is designed for tiling, but this hasn't been implemented in the visualization yet.

You can use the provided tool to get the data. Simply go to the data directory, create a python virtualenv with dependencies using Pipenv and the provided pipfile. Then run gfswind2png.py --help for instructions.

Acknowledgments

This code started as a fork of mapbox/webgl-wind.