How to Visualize Global Precipitation Weather Data on a Map

There are many ways to consume and integrate with forecast weather data, but one of the most popular is by visualizing those forecasts on an interactive map. The Tomorrow.io weather API map tiles are purposefully built and designed to easily integrate with common interactive map libraries like Google Maps, Mapbox GLJS and Leaflet JS for this exact reason. We want to make it simple to set up weather visualizations and in this step-by-step guide, we’ll walk you through how to do that as a simple static webpage.

1) Grab your API key and select your map library

The first thing to do is to decide which map library you want to use. Leaflet is a free open-source project, while Google and Mapbox require users to signup and get access to a key to use. You can also copy your exclusive Tomorrow.io API key.

2) Choose your data fields

Next is to determine which weather data parameters you want to visualize on your map. Review the fields in our Weather Data Layers collection in our documentation and choose any that are supported by the Map interface to visualize.

// pick the field (like temperature, precipitationIntensity or cloudCover)
const DATA_FIELD = 'precipitationIntensity';

3) Set your timestamp

It’s important to note that this step is optional: if there is no timestamp and format specified, the Tomorrow.io weather API will default back to “now” and “png”.

If you choose to specify a time, make sure to follow ISO 8601 datetime format.

// set the ISO timestamp (now for all fields, up to 6 hour out for precipitationIntensity)
const TIMESTAMP = (new Date()).toISOString();

4) Initialize the map

You’re ready to overlay the weather data on your visualized map. Initialize the interactive map with base configuration like viewport laltong and zoom levels. Check out your map client’s API tot learn more about specific options.

// initialize the map
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: 42.355438,
      lng: -71.059914
    }
  });

5) Inject the tile

Finally, add the call that injects the right roster tile of weather data according to the x, y, z, or zoom grid system. If everything is set properly, including the keys, field, and timestamp, we should be able to see a colorized “heatmap” of weather on the map. You can see examples of us “dogfooding” this feature in our very own Weather Assistant App.

  // inject the tile layer
  var imageMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      if (zoom > 12) {
        return null;
      }

      return `https://api.tomorrow.io/v4/map/tile/${zoom}/${coord.x}/${coord.y}/${DATA_FIELD}/${TIMESTAMP}.png?apikey=${API_KEY}`;
    },
    tileSize: new google.maps.Size(256, 256)
  });

  map.overlayMapTypes.push(imageMapType);
}

There are many ways to interface with weather data but of course, visualized maps is one of the most popular and commonly used.

Sign up for a free account today and start visualizing your own weather data!