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).

Winter Storm

Setup

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 aeris.  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 terrain, temperatures, and cities-dk 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 get() 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 then() 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 div elements and prepare them for manipulation. Within the then() method, add the following snippet:

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

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 metaTarget we created earlier with the result.metadata.validDate value. Your result should look this this:

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: