Creating an efficient plot of Wind using Mapbox GL JS

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.

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(magnitude) as properties to every feature.

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "direction": 153.43495178222656,
                "magnitude": 0.3
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    102,
                    4
                ]
            }
        },
    ..........
    ]
}

Next, we had to solve the following problems,

• Import multiple custom icons.
• Plot a Symbol layer such that each wind barb plots as per its magnitude
• And most importantly, these icons should not look cluttered on the map

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.

Symbols used for representing Wind Barbs

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.

const layerKey = "WINDvector";
if(map){
  map.addLayer({
    id: layerKey,
    type: "symbol",
    source: layerKey,
    layout: {
      "icon-image": [
        "step",
        ["get", "magnitude"],
         "wind5",
         10,
         "wind10",
         15,
         "wind15",
         20,
         "wind20",
         25,
         "wind25",
         30,
         "wind30",
         35,
         "wind35",
         40,
         "wind40",
      ],
      "icon-size": 0.35 + (5 / 100) * 5,
      "icon-rotate": ["get", "direction"],
      "icon-anchor": "top",
      "icon-rotation-alignment": "map",
    },
    paint: {
      "icon-color": "black",
    },
  });
}

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:

• clusterMaxZoom: It lets us decide the max zoom level till which clustering is visible. Defaults to one zoom less than max zoom (so that at the last zoom features are not clustered).
• clusterRadius: It is used to set the radius of each cluster and defaults to 50. A value of 512 indicates a radius equal to the width of a tile.
• clusterProperties: This object defines custom properties on the generated clusters which are used for aggregating values from clustered points.

if (!map?.getSource(layerKey)) {
  map?.addSource(layerKey, {
    type: "geojson",
    data: geojsonData,
    cluster: true,
    clusterMaxZoom: 7,
    clusterRadius: 30,
    clusterProperties: {
    magnitude: ["max", ["get", "magnitude"]],
    direction: ["min", ["get", "direction"]],
   },
 });
}

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.

wind-barbs.mp4

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.