View: MapListing

The MapListing view displays a listing or menu of maps based on specific map categories or map types. This view is typically used alongside a MapViewer or MapController view to control the current weather data layers being displayed.

Use our wizard to customize this view

Configuration

The following configuration options are supported by this view:

Option Default Description
type list (string) The format of the listing, either as a simple vertical list (list) or a grid of thumbnails (thumbs)
categories undefined (array) An array of map categories to include in the listing
codes undefined (array) An array of map layer codes to include in the listing.
links false (boolean) Determines whether or not the component should use links when an item is selected or trigger an event. If set to false, you are responsible for updating your page and/or map content based on the selected item in the listing.
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 Aeris Weather 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):

set(:string)

​Sets the currently selected map item in the listing by passing the item’s associated value.

setRegion(:string)

​Sets the current map region to use with linked map items

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

select Triggered when a map item is selected from the listing. The layer's code and metadata payload object will be passed to the event.
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 a menu just for layers in the Radar/Satellite category as a simple list:

<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.MapListing('#wxblox', {
categories: ['radar/sat']
});
view.load();

// End view / layout code }); </script>

Display a menu for a specific set of layers as a thumbnail grid:

var view = new aeris.wxblox.views.MapListing('#wxblox', {
type: 'thumbs',
codes: ['radar', 'temperatures', 'alerts']
});
view.load();

Display a menu for specific categories and set of layers as a thumbnail grid:

var view = new aeris.wxblox.views.MapListing('#wxblox', {
type: 'thumbs',
categories: ['radar/sat'],
codes: ['alerts', 'stormcells', 'stormreports']
});
view.load();

Display a menu just for layers in the Radar/Satellite category as a simple list:

$view = new Aeris\WxBlox\View(’/maps/listing’, null, array(
‘categories’ => array(‘radar/sat’)
));
$content = $view->html();
echo $content;

Display a menu for a specific set of layers as a thumbnail grid:

$view = new Aeris\WxBlox\View(’/maps/listing’, null, array(
‘type’ => ‘thumbs’,
‘codes’ => array(‘radar’, ‘temperatures’, ‘alerts’)
));
$content = $view->html();
echo $content;

Display a menu for specific categories and set of layers as a thumbnail grid:

$view = new Aeris\WxBlox\View(’/maps/listing’, null, array(
‘type’ => ‘thumbs’,
‘categories’ => array(‘radar/sat’),
‘codes’ => array(‘alerts’, ‘stormcells’, ‘stormreports’)
));
$content = $view->html();
echo $content;

Display a menu just for layers in the Radar/Satellite category as a simple list:
https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/maps/listing?opts=%7B%22categories%22%3A%5B%22radar%2Fsat%22%5D%7D

https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/maps/listing/categories/radar%2Fsat

Display a menu for a specific set of layers as a thumbnail grid:
https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/maps/listing?opts=%7B%22type%22%3A%22thumbs%22%2C%22codes%22%3A%5B%22radar%22%2C%22temperatures%22%2C%22alerts%22%5D%7D

https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/maps/listing/codes/radar,temperatures,alerts/thumbs

Display a menu for specific categories and set of layers as a thumbnail grid:
https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/maps/listing?opts=%7B%22type%22%3A%22thumbs%22%2C%22categories%22%3A%5B%22radar%2Fsat%22%5D%2C%22codes%22%3A%5B%22alerts%22%2C%22stormcells%22%2C%22stormreports%22%5D%7D

https://wxblox.aerisapi.com/[api_key]/[secret_key]/views/maps/listing/categories/radar%2Fsat/codes/alerts,stormcells,stormreports/thumbs

Last modified: November 11, 2019