Javascript SDK Now In Beta

While we’ve had a JavaScript library available for a while, AerisJS, we knew we could do better when it comes to an official JavaScript SDK that is both modern and better aligns with our other toolkits, such as those for iOS and Android. So we’re excited to announce that our official AerisWeather JavaScript SDK is now in public beta for you to start testing in your own JavaScript applications.

JavaScript SDK Features

We’ve written our JavaScript SDK from the ground up using modern JavaScript that supports both the traditional script include method and newer NPM module implementations. The goal with all of our SDKs, not just the new JavaScript SDK, is to make it easier and quicker to start integrating data and imagery from your AerisWeather subscription into your mobile and web applications.

Main features include:

• Configure and request data from the AerisWeather Weather API
• Configure and request map imagery from AerisWeather Mapping Platform (AMP)
• Integrate a fully-customizable interactive weather map with third-party mapping libraries

More features and enhancements will be included in upcoming beta releases as we approach an official 1.0 release.

Using the SDK via Script Include

Using the AerisWeather JavaScript SDK via the script include method requires that you include the SDK from our CDN. Setup the SDK with your account’s access keys and start loading data once it’s ready. You’ll interact with the SDK using a public interface of supported methods when using this method.

The following uses the script include method to output the current observations, short-term outlook and threats for Albany, NY to the HTML page:

<div id="obs"></div>
<div id="outlook"></div>
<div id="threats"></div>

<script src="https://cdn.aerisapi.com/sdk/js/aerisweather.min.js"></script>
<script>
window.onload = function() {

    const aeris = new AerisWeather('CLIENT_KEY', 'CLIENT_SECRET');
    const loc = 'albany,ny';

    aeris.api().endpoint('observations').place(loc).get().then((result) => {
        const data = result.data.ob;
        document.getElementById('obs').innerHTML = `The current weather is ${data.weatherPrimary.toLowerCase()} and ${data.tempF} degrees.`;
    });

    aeris.api().endpoint('phrases/outlook').place(loc).get().then((result) => {
        const data = result.data[0] || result.data;
        if (data.phrases) {
            document.getElementById('outlook').innerHTML = data.phrases.long;
        }
    });

    aeris.api().endpoint('threats').place(loc).get().then((result) => {
        const data = result.data[0] || result.data;
        if (data.periods) {
            data = data.periods[0];
            if (data.storms) {
                document.getElementById('threats').innerHTML = data.storms.phrase.long;
            } else {
                document.getElementById('threats').innerHTML = ' No threats';
            }
        }
    });

};
</script>

The above will output the following to the browser within each target DOM element:

The current weather is cloudy and 39 degrees.
Expect light wintry mix starting around 7 PM with additional rainfall amounts around 0.35". Temperatures falling to 30 degrees in the morning.
No threats

You can also use the SDK to easily request AerisWeather Mapping Platform (AMP) imagery using your account. The following would display a 500×300 sized map showing the current radar for Albany, NY and output the valid time for the image based on the radar data underneath:

<div id="map-target"></div>
<div id="map-metadata"></div>

<script src="https://cdn.aerisapi.com/sdk/js/aerisweather.min.js"></script>
<script>
window.onload = function() {

    const aeris = new AerisWeather('CLIENT_KEY', 'CLIENT_SECRET');
    const loc = 'albany,ny';

    aeris.map().layers('flat,radar,counties,admin').center(loc).zoom(8).size(500, 300).get().then((result) => {
        const meta = result.metadata;
        document.getElementById('map-target').appendChild(result.image);
        document.getElementById('map-metadata').innerHTML = `Valid: ${result.metadata.validDate}`;
    });

};
</script>

The above will output the following to the browser:

Refer to the Script Usage and Loading Data sections of our usage documentation for additional information about this method and its implementation.

Using the SDK via NPM Module

Instead of using the traditional script include method, you can use the SDK’s NPM module as a dependency in your JavaScript project. There are several benefits to using this method as it allows you to use the SDK in NodeJS applications or to bundle the SDK into your own project using tools like Webpack or Rollup. Additionally, you’re not limited to using the public interface that’s provided with the script include method as you will be able to access and use any of the public classes the library provides.

Once you’ve installed the AerisWeather JavaScript SDK module in your project, getting weather data into your application is easy. The following performs a simple forecast data request for Minneapolis, MN and outputs it to the console:

import ApiRequest from '@aerisweather/javascript-sdk/dist/network/api/ApiRequest';

const request = new ApiRequest({
     client: {
          id: 'CLIENT_ID',
          secret: 'CLIENT_SECRET'
     }
});

request.endpoint('forecasts').place('minneapolis,mn').get().then((result) => {
     console.log(result.data);
});

Alternatively, you can request AerisWeather Maps (AMP) imagery as well:

import MapRequest from '@aerisweather/javascript-sdk/dist/network/maps/MapRequest';

const request = new MapRequest({
     client: {
          id: 'CLIENT_ID',
          secret: 'CLIENT_SECRET'
     }
});

// configure and perform the request
request.layers('flat,radar,admin').center('minneapolis,mn').zoom(8).size(500, 300).get().then((result) => {
    console.log(result.image, result.metadata);
});

Refer to the Module Usage and Loading Data sections of our usage documentation for additional information about this method and its implementation.

Getting Started with the JavaScript SDK

This is just a brief introduction to our new JavaScript SDK as it enters public beta. Over the coming months, we’ll be expanding our usage documentation and examples as well as posting more in-depth blog posts as we approach our official 1.0 release. So get started with the new SDK today! And if you don’t have an AerisWeather account yet, sign up for free to start working with the JavaScript SDK and all of our other toolkits and products.

And while you’re working with the SDK, be sure to provide us with your feedback and suggestions so we can continue to improve it.

Resources

• Usage Documentation
• Developer/Code Docs
• JavaScript SDK Feedback/Support

Share this post: