JavaScript Usage

When using the client-side (JavaScript) method for integrating WeatherBlox views into your application, the views are rendered after your main page has loaded and all requests are performed asynchronously. This method is the easiest to get started with as it doesn't require any server-side development in order to output the weather views into your HTML. However, using the JavaScript method can also increase your API usage as you can't control the amount of caching that is performed.

Once you have an active Aeris API account and access keys for your application, follow these steps to get started using the JavaScript method:

Step 1: Include the library CSS and script files from our CDN:

<link href="https://cdn.aerisapi.com/wxblox/aeris-wxblox.css" rel="stylesheet" />
<script src="https://cdn.aerisapi.com/wxblox/aeris-wxblox.js"></script>

Step 2: Set your access keys:

Aeris.wxblox.setAccess('CLIENT_KEY', 'CLIENT_SECRET');

Step 3: Configure your WeatherBlox views and/or layouts and set their destination DOM targets where they will be rendered:

var view = new Aeris.wxblox.views.NearbyObservations('#obs');

Step 4: Add any desired event handlers. Refer to the general view or layout documentation for more information regarding the supported events for each view:

view.on('render:after', function(e) {
     console.log('after render');
});

Step 5: Load and/or render your view, providing any additional API request parameters to control the view's output:

view.load({
     p: 'austin,tx'
});

Customization

WeatherBlox views are customizable to get the content and look you need. Refer to the customization documentation for the various methods available.