View: Tropical

The Tropical view displays a variety of view types depending on the desired output using the viewType configuration option.

JavaScript:	`aeris.wxblox.views.Tropical`
Server Path:	`tropical/active, tropical/archive, tropical/track/:id`
Data API/AMP Usage:	1 /tropicalcyclones call + requested AMP Map Units
Supported Plans	API Premium, API Developer

Configuration

The following configuration options are supported by this view:

Option	Default	Description
viewType	`active`	(string) The type of view to display from the supported options: active displays only the active systems for a given season and as a result will only return data for the current season; archive displays the full list of tropical systems for a given season, both active and non-active; track displays the full track details for a single system.
year	`:currentYear`	(string) The season of the year to request data for (not used if `viewType` is track).
basins	`AP,EP,CP,WP,IO,SH`	(string) The basin codes to include in the basin listing views.
reversed	`true`	(boolean) Whether the basin systems or system track information should be reversed where the newest data will appear at the top of listings.
maps		(object) Configuration for the static Aeris Maps (AMP) image associated with each active system (only used when `viewType` is active).
show.title	`true`	(boolean) Whether the view title should be rendered above the output.
show.empty	`true`	(boolean) Whether basins without any systems returned should be included in basin listings.
show.tabbed	`false`	(boolean) Whether the basin listings should be rendered in a tabbed format rather than a single vertical list.
show.maps	`true`	(boolean) Whether current position maps should be included for active systems; this value will automatically be `false` if you're Aeris account doesn't include access to tropical layers via the Aeris Maps Platform.
show.links	`false`	(boolean) Whether system links should be included when rendering basin listings.
enabled	`true`	(boolean) Whether or not this view is enabled. If `false` then the view will not be rendered and it's required data will not be requested. This option is typically only applicable for views contained within a parent layout.
metric	`false`	(boolean) Whether or not to display units in metric. The method `setUnits()` can be used at runtime once a view has rendered to change the units currently displayed.
renderNoData	`true`	(boolean) Whether or not the view should be rendered if data was not returned or not available
request	`undefined`	(object) An object containing the default AerisWeather API request options to use for the views's data request where applicable. These parameters can also be overriden in the `load(:params)` method when rendering the view using the JavaScript method.

Methods

The following methods are supported by instances of this view (JavaScript method only):

`enabled()`	[boolean] Whether or not the component is currently enabled. When false, the component will not be rendered and data required for the component will not be requested.
`hide()`	Hides the component's DOM element.
`isMetric()`	[boolean] Whether or not the component is currently displaying Metric units.
`load(:object)`	Requests data required by the component and renders the result. For components that don't require remote data requests, this method will call render() immediately. An optional object of request parameters can be provided to use for the request.
`params()`	[object] Returns the latest request parameters used when loading data.
`refresh()`	Re-renders the component using the cached data that was previously loaded.
`rendered()`	[boolean] Whether or not the component has rendered.
`setMetric(:boolean)`	Convenience method for setUnits() to toggle Metric units, where true sets the component's units to Metric and false uses Imperial.
`setUnits(:number)`	Updates the unit type being displayed by the component, where 0 is Imperial and 1 is Metric.
`show()`	Shows the component's DOM element.
`units()`	[number] The current unit type being displayed, where 0 is Imperial and 1 is Metric.

Events

The following events are triggered by instances of this view (JavaScript method only):

`change:units`	Triggered when the component's unit type has changed (e.g. metric or imperial).
`load:done`	Triggered after the component's data has loaded but before rendering the component.
`load:error`	Triggered when an error occurs while requesting the component's data.
`load:start`	Triggered immediately before the component's data request begins loading.
`render`	Alias for render:after.
`render:after`	Triggered after the component has rendered and any additional DOM elements and/or events have been setup as needed for the component.
`render:before`	Triggered immediately before the component is rendered, allowing you to access and modify the data used in the template before getting rendered.

Examples

Use the following examples to assist with getting started using this view. Select your WeatherBlox integration method for example code specific to that usage.

JavaScript

API via Package

API via URL

The first example below can be pasted into the body of your HTML document. For each additional snippet, you can replace the snippet within the first example which is located between the JavaScript comments.

Display the active tropical systems for the current season in a single listing:

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

<!-- DOM target where the WeatherBlox view will be rendered -->
<div id="wxblox"></div>

<script>
const aeris = new AerisWeather('CLIENT_KEY', 'CLIENT_SECRET');
aeris.on('ready', () => {
	// Insert view / layout code below
	var view = new aeris.wxblox.views.Tropical('#wxblox');

	view.load();	// End view / layout code
});
</script>

Display the active tropical systems for the current season in a tabbed format:

var view = new aeris.wxblox.views.Tropical('#wxblox', {

    show: {

        tabbed: true

    } 

});

view.load();

Display all tropical systems for the current season in a single listing:

var view = new aeris.wxblox.views.Tropical('#wxblox', {

	viewType: 'archive'

});

view.load();

Display all tropical systems for 2005 in a tabbed format:

var view = new aeris.wxblox.views.Tropical('#wxblox', {

	viewType: 'archive',

    	year: '2005'

});

view.load();

Display the full track for a specific tropical system (example uses Katrina):

var view = new aeris.wxblox.views.Tropical('#wxblox', {

	viewType: 'track'

});

view.load({

    p: '2005-AL-12'

});

Display the active tropical systems for the current season in a single listing:

$view = new Aeris\WxBlox\View(‘views/tropicalcyclones’);

$content = $view->html();

echo $content;

Display the active tropical systems for the current season in a tabbed format:

$view = new Aeris\WxBlox\View(‘views/tropical’, array(

	‘show’ => array(

		‘tabbed’ => true

	)

));

$content = $view->html();

echo $content;

Display all tropical systems for the current season in a single listing:

$view = new Aeris\WxBlox\View(‘views/tropical’, array(

	‘viewType’ => array(‘archive’)

);

$content = $view->html();

echo $content;

Display all tropical systems for 2005 in a tabbed format:

$view = new Aeris\WxBlox\View(‘views/tropical’, array(

	‘viewType’ => array(‘archive’),

	‘year’ => array(‘2005’)

);

$content = $view->html();

echo $content;

Display the full track for a specific tropical system (example uses Katrina):

$view = new Aeris\WxBlox\View(‘views/tropical’, ‘2005-AL-12’ array(

	‘viewType’ => array(‘track’)

);

$content = $view->html();

echo $content;

Display the active tropical systems for the current season in a single listing:
https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/tropical/active

Display the active tropical systems for the current season in a tabbed format:
https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/tropical/?opts=%7B%22show%22%3A%7B%22tabbed%22%3Atrue%7D%7D

Display all tropical systems for the current season in a single listing:
https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/tropical/?opts=%7B%22viewType%22%3A%22archive%22%7D

Display all tropical systems for 2005 in a tabbed format:
https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/tropical/?opts=%7B%22viewType%22%3A%22archive%22%2C%20%22year%22%3A%222005%22%7D

Display the full track for a specific tropical system (example uses Katrina):
https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/tropical/2005-AL-12?opts=%7B%22viewType%22%3A%22track%22%7D

Last modified: March 02, 2020