July 24

Create Faster Animated Weather Maps Using Multiple Tile Servers and the Google Maps API

One of the most challenging elements of utilizing large volumes of weather data for business can be performance. With weather as an input to nearly every industry in some regard, the importance of consistent, fast data retrieval and rendering is paramount. Loading high-resolution and layered imagery inefficiently can dramatically interrupt the smoothness of utilizing interactive and animated map elements within any application, online or otherwise. Fortunately for AerisWeather users, one can call upon multiple tile servers working in unison to dramatically increase render speed.

Many customers already have integrations with third-party mapping platforms like Google, Mapbox, or Leaflet, so in this example we’ll walk through how to enable multi-tile server map animation in conjunction with a Google Maps instance.  The below sections explain the code line by line, but if you are looking to jump ahead, you’ll find the full length of code at the end of this tutorial.

Getting Started – Google Maps Key & CSS

The first step to getting started is to ensure you have a Google Maps API key or create a new one. To create your own, sign up for a Google Cloud account and verify your email. Be sure to restrict your API key’s usage via the Google Cloud Console before sending your project live for added security.

The next step is to add CSS to style your map into the <head>. Below is a basic snippet that creates a full-width map within its container:

Now place the container, ensuring you are working in the <body> tags of your HTML file:

Render the Google Map and Integrate AerisWeather Mapping Platform (AMP):

In this step, we will render the AerisWeather mapping layers we’d like to animate to display the movement and change within weather patterns and events. You’ll need to create an AerisWeather account if you have not already and gather or generate new keys under the “Apps” tab of your account.

Next, we need to set the parameters of our animation. Use   to define the number of intervals in your animation and   to define the number of minutes back in time for your animation to start from, using negative values to denote the past.   allows you to define the time offset of the final interval, with 0 being the current hour and minute.  Please note that the default number of intervals is 10 and animation playback speed is 2 seconds.  If you simply define a start and end time, the mapping platform will automatically calculate the frames between those times and as closely match those to the tiles and times we have available in our database.

In the below snippet we now declare our AerisWeather credentials and the layers we want to animate on our map:

Adding a little direction for the construction of our URL string. No inputs or further code needed below; we’ve done the concatenation work for you.

tileSize: new google.maps.Size(TILE_SIZE, TILE_SIZE),
opacity:  opacity

AerisWeather, Fetch [My Tiles]!

We are now ready to begin rendering our Google Map! We initialize our map and layers within an event handler once everything on the page has loaded, including the Google Maps library we’ll be referencing. First, we set up the map instance and then grab our map tiles for each interval and giving them time to load before starting the animation. Once more, just breaking down the functions:

After this, you’re safe to close your script tags. The final step is to let Google know you’re legitimate by inserting your Google Maps API key as a parameter in the query string in <script> tags directly below. Voila, you’re done!

As promised, below is the full code block with a few additional comments:

tileSize: new google.maps.Size(TILE_SIZE, TILE_SIZE),
opacity: opacity

window.addEventListener(‘load’, () => {
// initialize map
map = new google.maps.Map(document.getElementById(‘map’), {
center: {
lat: 43.0,
lng: -93.0
zoom: 5

// set up the animation frames and layers
const frames = [];
for (let i = 0; i < frameCount; i += 1) {
const opacity = (i === 0) ? 1 : 0;
frames.push(new google.maps.ImageMapType(getTileServer(i, layers, opacity)));

// wait time determines how long to wait and allow frames to load before
// beginning animation playback
const waitTime = 5000;

// step time determines the time in milliseconds each frame holds before advancing
const stepTime = 1000;

let currentOffset = 0;
let previousOffset = currentOffset;

setTimeout(() => {
setInterval(() => {
previousOffset = currentOffset;
currentOffset += 1;
if (currentOffset === frames.length – 1) {
currentOffset = 0;
}, stepTime);
}, waitTime);

<script src=”https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY” async defer></script>


There you have it – faster weather maps, animatable in any direction throughout time. Have further questions or interested in other tutorials? Please reach out to our team to provide feedback as we’re always excited to share better and interesting ways of using our weather API and Weather Mapping Platform.

Share this post:


  1. July 30, 2020 at 12:38 pm

    Is this going to be possible with mapbox GL JS?

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.