Visualize wind data | Mapbox Tiling Service

In this example, you'll process GFS wind data from NOAA using Raster MTS. The goal is to create a raster-array source for animating wind data based on speed and direction using particle animation.

Prerequisites

Environment variables

Throughout this example, you'll use the following required environment variables:

And when replacing these variables in code snippets or commands, refer to this list:

(Optional) Designing a Raster MTS recipe

The task of a Raster MTS recipe is to describe how source data is mapped to the MRT-formatted tiles which Raster MTS delivers.

The GDAL tool gdalinfo is an excellent resource for understanding the structure of your data.

Create a tileset source

First you will create a tileset source by uploading our GFS data to MTS. If you're using the API directly, you'll need to make a request for each individual source file that you reference in your recipe. This example is processing only one single source file, so you'll only need to make the following POST request once.

Create a recipe

A recipe is a set of instructions used for processing raster data. To use your recipe you will need to create a file and add your own information:

The recipe feature from above shows that Raster MTS uses the u-component_of_wind_height_above_ground and v-component_of_wind_height_above_ground bands to form the wind vector, where the NETCDF_DIM_height_above_ground2 dimension is 10.

Create an empty tileset

Now you will create an empty tileset and provide the recipe to be used for processing.

Publish a tileset

At this point, you have uploaded a source, created an empty tileset and provided a recipe to process the source for this tileset. Now you can start processing your tileset by publishing it.

Get your tileset's job information

At this point, Raster MTS will begin to process your job with a job_id. You can retrieve your job's information by calling the API endpoint below with your job_id.

Add tileset to map

Using this tileset as a raster-array source you will add the source to our map as a raster-particle layer. This will render a particle animation on a map based on wind velocity and direction.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Visualize wind data</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
  const map = new mapboxgl.Map({
    container: 'map',
    maxZoom: 2,
    minZoom: 2,
    zoom: 2,
    center: [-28, 47],
    // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
    style: 'mapbox://styles/mapbox/dark-v11'
  });

  map.on('load', () => {
    map.addSource('raster-array-source', {
      'type': 'raster-array',
      // Replace this URL with a 'mapbox://TILESET_ID'
      'url': 'mapbox://mapbox.gfs-winds',
      'tileSize': 512
    });
    map.addLayer({
      'id': 'wind-layer',
      'type': 'raster-particle',
      'source': 'raster-array-source',
      'source-layer': '10winds',
      'paint': {
        'raster-particle-speed-factor': 0.4,
        'raster-particle-fade-opacity-factor': 0.9,
        'raster-particle-reset-rate-factor': 0.4,
        'raster-particle-count': 4000,
        'raster-particle-max-speed': 40,
        'raster-particle-color': [
          'interpolate',
          ['linear'],
          ['raster-particle-speed'],
          1.5,
          'rgba(134,163,171,256)',
          2.5,
          'rgba(126,152,188,256)',
          4.12,
          'rgba(110,143,208,256)',
          4.63,
          'rgba(110,143,208,256)',
          6.17,
          'rgba(15,147,167,256)',
          7.72,
          'rgba(15,147,167,256)',
          9.26,
          'rgba(57,163,57,256)',
          10.29,
          'rgba(57,163,57,256)',
          11.83,
          'rgba(194,134,62,256)',
          13.37,
          'rgba(194,134,63,256)',
          14.92,
          'rgba(200,66,13,256)',
          16.46,
          'rgba(200,66,13,256)',
          18.0,
          'rgba(210,0,50,256)',
          20.06,
          'rgba(215,0,50,256)',
          21.6,
          'rgba(175,80,136,256)',
          23.66,
          'rgba(175,80,136,256)',
          25.21,
          'rgba(117,74,147,256)',
          27.78,
          'rgba(117,74,147,256)',
          29.32,
          'rgba(68,105,141,256)',
          31.89,
          'rgba(68,105,141,256)',
          33.44,
          'rgba(194,251,119,256)',
          42.18,
          'rgba(194,251,119,256)',
          43.72,
          'rgba(241,255,109,256)',
          48.87,
          'rgba(241,255,109,256)',
          50.41,
          'rgba(256,256,256,256)',
          57.61,
          'rgba(256,256,256,256)',
          59.16,
          'rgba(0,256,256,256)',
          68.93,
          'rgba(0,256,256,256)',
          69.44,
          'rgba(256,37,256,256)'
        ]
      }
    });
  });
</script>

</body>
</html>

Prerequisites​

Environment variables​

(Optional) Designing a Raster MTS recipe​

Create a tileset source​

Create a recipe​

Create an empty tileset​

Publish a tileset​

Get your tileset's job information​

Add tileset to map​

Troubleshooting​