March 6

Using the JavaScript SDK to Display Static Weather Maps

We recently published a blog detailing how users can fetch data from the API using the new JavaScript SDK. This time we’ll spend a few minutes diving into the SDK’s static weather maps using the AerisWeather Mapping Platform (AMP).

Static Weather Maps - Radar Minneapolis

Winter Storm


We’re going to assume you’re using front-end JavaScript in an HTML document for this example. Prior to adding static weather maps to our page, we will need a get a few items setup. First, we’ll need to include the library like so:

This can be added in the header or the body. Next, let’s instantiate the library and make sure the library is fully loaded before doing so:

This portion will need to go in a script tag within the document body. Lastly, I’ll add a couple target elements, one for the map and another for additional data we will include about the map.

We’ve got that out of the way now so let’s move onto the fun stuff.

Requesting Static Weather Maps

Previously we had instantiated the library and declared it as .  Similar to how we use the API in the JS library, we can chain methods to build out our request. Below you’ll find my request to AMP asking for a the , , and layers. You’ll also see the temperatures layer has an image modifier associated with it — this is a unique feature available in AMP that we’ve made sure to support in the JS SDK. Additionally, I’ll center the map on Denver at zoom 6 and request an image that is 800 pixels by 600 pixels. Oh, and don’t forget to add to the end! This tells the library to perform the HTTP request.

This will request the map and save the result as a Promise. Now we can utilize the method to perform subsequent tasks, such as inserting the map into the DOM.

Inserting the Image and Data

Before we can insert any imagery or data into the DOM, we have to know where it’s going. Let’s grab the elements and prepare them for manipulation. Within the then() method, add the following snippet:

Now we can take the and add it into the . The result and code snippet should look like this:

Static Weather Maps - Denver Temps

Denver Temps

All great weather maps also need to tell you when these conditions were true, aka the valid time. Lucky for us the new JavaScript SDK has our best interests in mind. Remember that result object we got back in our response? Well, it also contains other details such as the valid time! What an exciting time to be using out SDK. Adding the valid time is as simple as adding the image. Just append the we created earlier with the value. Your result should look this this:

Static Weather Maps - Temps with Valid Time

With Validtime

Here’s a glimpse at the full snippet:

Additional Features

In addition to this brief introduction, there are a lot more capabilities offered with static weather maps. In our documentation you can find additional methods and a breakdown of the request result. For an in-depth dive into the JavaScript SDK and it’s offerings, check out the Code Docs which will bring you through every nook and cranny of the SDK. Another feature that’s built into the SDK is our Legend View. Use this feature to pull in a pre-built legend, or customize a legend for your viewers.

We’d love to see what you’re going to build with the JavaScript SDK so reach out to our team or hit us up on Twitter!

Share this post:

1 Comment

  1. May 7, 2019 at 9:48 pm

    […] like the fetching data and static maps posts related to our JavaScript SDK, we will need to get our feet set with a few items before we […]

Leave a Reply

Your email address will not be published.

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