Creating an efficient plot of Wind using Mapbox GL JS

Shivalika Saxena

May 16, 2023 | 5 minutes read

The challenge

One of our projects involving oceanographic data required us to plot weather datasets like wind and waves on the map. While we were using the Mapbox GL JS library for drawing the map and plotting some basic features like contours using the line layers , plotting the weather datasets seemed tricky.

The CSV datasets for weather consisted of more than 75 thousand points which were to be plotted on the map in a way that all points are distinctly visible and not cluttered on the map.

The wind dataset is a collection of vectors. And as we know, in Physics, a vector is a quantity that has both magnitude and direction. This means that along with its velocity, its direction is also taken into consideration during measurement. A vector is typically represented by an arrow whose direction is the same as that of the quantity and whose length is proportional to the quantity’s magnitude.

We were supposed to plot wind barbs to display this data on the map. Wind barbs are simply a convenient way to represent wind speed and direction in a compact graphical form.

gp-chart

Working on a solution

We parsed the CSV dataset and converted it to a GeoJSON object such that each feature in the JSON was of type Point. We also attached direction and speed as properties to every feature.

FeatureCollection

Next, we had to solve the following problems,

Import multiple custom icons

Mapbox provides  loadImage  and  addImage  functions to add custom images and icons to the map. We added each of the following PNG images of wind barbs ranging from 5 knots to 40 knots to the map. One long barb is used to indicate every 10 knots with the short barb representing 5 knots.

custom-icons

Plotting Symbol layer for Wind Data

The symbol layer is a layer in which icons or text are added to the Mapbox map. To plot an icon, multiple layout properties can be configured for setting their size, positioning, and appearance.

To change the icons based on the speed of each data point, we used the  icon-image  property along with a  step  expression to evaluate each magnitude and draw wind barbs accordingly.

WINDvector

Decluttering our map with clustering

Our final challenge was to make the map look clean at every zoom level. Clustering is a feature provided by Mapbox in which the points drawn on the map get grouped into fewer points when the map is zoomed out. On zooming in, once we cross the max zoom level set for clustering, we can view the actual points plotted according to our dataset.

By clustering the points together you can improve performance greatly while presenting the data with more clarity.

For achieving this, we have to enable the cluster property while adding our source. Some important properties are:

getSource
In the clip below, we can see that at the change of every zoom level, the number of barbs drawn on the map changes. When the max zoom level, in our case 7 is reached, no more clustering takes place and actual values are drawn on the map.

In this way, we were able to utilize some important features provided by Mapbox like adding custom images, drawing symbol layers, and clustering to create an efficient plot of wind barbs.