Create a temperature map | Mapbox Tiling Service

In this example, we'll process GFS temperature data from NOAA using Raster MTS. This is a multi-band dataset where each band is a single timestamp.

The goal is to create a raster-array source and add it on a map to visualize temperature.

Prerequisites

Environment variables

Review raster source metadata

The GDAL tool gdalinfo is a useful 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'll be referencing 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 construct indicates that Raster MTS should only process bands that have a NETCDF_VARNAME that includes Temperature_height_above_ground where the NETCDF_DIM_height_above_ground3 dimension is 2.

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.

Review tileset 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.

Review tileset TileJSON

Once the tileset is finished processing, you can retrieve TileJSON for this tileset, which stores all the useful metadata that can be used for map visualizations.

The id, band and range keys in the TileJSON identify which layer and band to display and how to assign colors to the values.

Add tileset to map

We will use raster-array-band to allot value 3, which represents the band named 3 in the source NetCDF file. We will use paint properties to assign color using Mapbox GL JS.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create a temperature map</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',
    style: 'mapbox://styles/mapbox/light-v11',
    zoom: 0,
    center: [0, 0],
    projection: 'mercator'
  });

  map.on('load', () => {
    map.addSource('gfs-temperature', {
      type: 'raster-array',
      // Replace this URL with a 'mapbox://TILESET_ID'
      url: 'mapbox://mapbox.gfs-temperature',
      tileSize: 256
    });
    map.addLayer({
      id: 'gfs-temperature-layer',
      type: 'raster',
      source: 'gfs-temperature',
      // If your tileset has multiple layers, you can specify which one to use with the 'source-layer'.
      // In this example we're specifying the '2t' temperature layer defined in the recipe above.
      'source-layer': '2t',
      paint: {
        'raster-color-range': [204, 323],
        'raster-array-band': '3',
        'raster-color': [
          'interpolate',
          ['linear'],
          ['raster-value'],
          204,
          '#50509B',
          266,
          '#FAFAA0',
          323,
          '#96053C'
        ],
        'raster-resampling': 'nearest'
      }
    });
  });
</script>

</body>
</html>

Prerequisites​

Environment variables​

Review raster source metadata​

Create a tileset source​

Create a recipe​

Create an empty tileset​

Publish a tileset​

Review tileset job information​

Review tileset TileJSON​

Add tileset to map​