Visualize wind data | Mapbox Tiling Service

In this example, we'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

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 tool for understanding the structure of your data.

Create a tileset source

Next, we'll 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. In the example GFS data that we're processing we only have a single source file, so we'll make the following POST request once.

Create a recipe

The following recipe feature 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

Publish a tileset

At this point you have uploaded a source, created an empty tileset, and provided a recipe to be used for processing the source to 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 we 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​

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​