Setting up WeatherBlox

When using the JavaScript method for including weather blox into your page, the blox 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 blox content into your HTML page.

Follow these steps to get started using the JavaScript method and reference the code block below for a complete example:

Include the WeatherBlox stylesheet and script assets

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

Create a DOM target where the WeatherBlox view will be rendered

<div id="wxblox"></div>

Configure the `AerisWeather` client

const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');

Wait for the WeatherBlox library to initialize

aeris.on('ready', () => {
    // ...
});

Set up your desired WeatherBlox components

const widget = new aeris.wxblox.views.Forecast('#widget');

Add necessary event handlers

widget.on('load:start', function(e) {
    console.log('load started');
});
widget.on('load:done', function(e) {
    console.log('load done');
});

Render the view

widget.load({
    p: '98109'
});

Here's a complete example of the above setup:

<!-- Step 1: Include the WeatherBlox stylesheet and script assets -->
<link href="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.css" rel="stylesheet"/>
<script src="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.js"></script>
 
<!-- Step 2: Create a DOM target where the WeatherBlox view will be rendered -->
<div id="wxblox"></div>
 
<script>
 
// Step 3: Within a <script> tag block, configure the AerisWeather client with your Weather API access keys and custom options
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
 
// Step 4: Set up an event handler to be notified when the WeatherBlox library has fully loaded and initialized:
aeris.on('ready', () => {
 
    // Step 5: Within your "ready" event handler, setup your desired components:
    const widget = new aeris.wxblox.views.Forecast('#widget');
 
    // Step 6: Add any desired event listeners/handlers for your view instance:
    widget.on('load:start', function(e) {
        console.log('load started');
    });
    widget.on('load:done', function(e) {
        console.log('load done');
    });
    widget.on('render:before', function(e) {
        console.log('before render');
    });
    widget.on('render:after', function(e) {
        console.log('after render');
    });
 
    // Step 7: Render the view by calling `load()` on your widget, passing any additional API request parameters:
    widget.load({
        p: '98109'
    });
 
});
 
</script>

Configuration

Each component provides the following core configuration options:

Option	Description	Default
`enabled`	Type: `boolean` ()Whether or not this component is enabled. If `false` then the component will not be rendered and it's required data will not be requested.	`true`
`metric`	Type: `boolean` ()Whether or not to display units in metric. The method `setUnits()` can be used at runtime once a component has rendered to change the units currently displayed.	`false`
`renderNoData`	Type: `boolean` ()Whether or not the component should be rendered if data was not returned or not available.	`true`
`request`	Type: `object` ()An object containing the default API request options to use for the component's data request where applicable.	`undefined`

The following is the default configuration object:

{
    enabled: true,
    metric: false,
    renderNoData: true,
    request: undefined
}

Events

The JavaScript weather blox trigger events that you can observe and handle accordingly. By default, all components trigger the following events:

load:start

load:done

load:error

render:before

render:after

render

change:units

Layout/view components, which are a combination of individual weather blox to output a larger blox of content, also trigger their own events related to the rendering of the layout's components. All layouts trigger the following events:

components:render

Methods

The following public methods are available on all JavaScript components. Each component may support additional public methods which will be detailed in each component's documentation.

arams()

show()

hide()

enabled()

rendered()

units()

setUnits(:number)

isMetric()

refresh()

load(:object)

Getting Started Configuration