Layout: Maps

The Maps layout displays and manages a MapController view along with a MapListing menu for changing data layers and a map region menu for updating the active bounds for the map.

Note: We recommend utilizing the JavaScript integration method for this layout.

Use our wizard to customize this layout

Configuration

The following configuration options are supported by this view:

Option Default Description
controller (object) Configuration options passed to the internal MapController view.
controller.viewer (object) Configuration options passed to the internal Map Viewer view.
controller.viewer.map (object) Default map configuration.
controller.viewer.map.layers (object) The layer configuration for the map.
controller.viewer.map.layers.base ["flat"] (array) An array of base map layer codes to render below all weather and overlay layers.
controller.viewer.map.layers.data undefined (array) An array of supported weather layer codes.
controller.viewer.map.layers.overlays ["admin"] (array) An array of overlay layer codes to render above all weather and base layers.
controller.viewer.map.size {} (object) Configuration for the map size.
controller.viewer.map.size.width "auto" (number) [integer/auto] Map width in pixels (limited by your Aeris Maps level), or auto to have the width automatically set to fill the map container's width.
controller.viewer.map.size.height "auto" (number) Map height in pixels (limited by your Aeris Maps level), or auto to have the height automatically calculated based on the map container's width and the specified map.size.factor ratio
controller.viewer.map.size.factor 0.75 (number) The scale factor to use when height is set to auto. The map height will be calculated by multiplying either the specified width value or DOM container's width by the factor value.
controller.viewer.animation (object) Configuration for the map animation
controller.viewer.animation.enabled true (boolean) Whether or not to enabled animation. If false, then the viewer will only display data for the current time
controller.viewer.animation.autoplay false (boolean) Whether or not to have your animation autoplay when the WxBlox layout loads.
controller.viewer.animation.alwaysShowPast false (boolean) Whether or not to display past layers (observed) even if the timeline is in the future.
controller.viewer.animation.alwaysShowFuture false (boolean) Whether or not to display future layers even if the timeline is in the past.
controller.viewer.animation.duration 2 (number) Total duration of the animation in seconds; duration and intervals are both used to control the overall speed of the animation
controller.viewer.animation.endDelay 1 (number) Number of seconds to lapse before the animation starts over.
controller.viewer.animation.intervals 10 (number) Total number of frames to use for the animation; duration and intervals are both used to control the overall speed of the animation.
controller.viewer.overlays (object) Configuration for custom overlays rendered above the map.
controller.viewer.overlays.timestamp MM/DD/YYYY hh:mm A (string) [string] or [object] A string value indicates the time and date format for the map's timeline during playback. Provide an object to include additional options.
controller.viewer.overlays.branding (object) Map branding options.
controller.viewer.overlays.branding.img undefined (string) A URL to an image to display on the map, such as a company logo.
controller.viewer.overlays.branding.html undefined (string) An HTML string to display for the map branding, such as a company logo or name.
controller.range (object) Configuration for your timeline range.
controller.range.intervals -24, -12, -6, -2, 0, 2, 6, 12, 24 (string) Clickable intervals for your animation timeline.
controller.range.init (object) Default configuration for the initial values of the timeline range.
controller.range.init.from -2 (number) Initial from value that is selected for the animation when your WxBlox layout loads.
controller.range.init.to 0 (number) Initial to value that is selected for the animation when your WxBlox layout loads.
regions {} (object) An object consisting of a series of items to display in the region selector menu. Refer to the Region Menu page for usage details.
layers (object) Configuration options passed to the internal MapListing view.
layers.categories undefined (string) Add categories of layers in the Related Maps section. Applicable categories:
layers.codes undefined (string) Custom list of layers based on layer name.
layers.type "list" (string) "list" or "thumbs" to display the format of related maps. Thumbs will be the thumbnails while list will be text.
layers.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.
selectors (object) Selectors for DOM render targets
selectors.controller .awxs-view-map (string) DOM target where the internal MapController component is rendered
selectors.regions .awxs-nav-regions (string) DOM target where the region selector menu is rendered
selectors.layers .awxs-nav-layers (string) DOM target where the internal MapListing component is rendered
init (object) The initial values when the component is rendered
init.regions {} (object) The initially-selected value in the region selector menu
init.regions.key undefined (string) Regional category that will be initially selected when WxBlox component loads.
init.layers {} (object) The initially-selected value in the map layers listing menu
init.layers.value undefined (string) AMP layer that will be initially selected when WxBlox component loads.
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.

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 a weather map view using the default configuration with custom options for layers (MapListing) component:

<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.layouts.Maps('#wxblox', {
layers: {
categories: [],
codes: ['radar', 'alerts', 'temperatures']
}
});
view.load();

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

Display a weather map view using a custom region selector menu and different categories for the maps listing:

var view = new aeris.wxblox.layouts.Maps('#wxblox', {
layers: {
categories: ['radar/sat', 'severe', 'observations']
},
  regions: {
items: {
us: {
label: 'United States'
},
        region: {
us: aeris.wxblox.regions.asArray(['usne','usse','usnc','ussc','usnw','ussw'], {
label: 'name',
value: 'code'
})
        }
      }
  }
});
view.load();

Display a weather map view using the default configuration with custom options for layers (MapListing) component:

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

Display a weather map view using a custom region selector menu and different categories for the maps listing:

$view = new Aeris\WxBlox\View(’/layouts/maps’, null, array(
‘layers’ => array(
‘categories’ => array(‘radar/sat’, ‘severe’, ‘observations’)
),
‘regions’ => array(
‘items’ => array(
‘us’ => array(
‘label’ => ‘United States’
),
‘region’ => array(
‘us’ => array(
array(‘label’ => ‘Northeastern US’, ‘value’ => ‘usne’),
array(‘label’ => ‘Southeastern US’, ‘value’ => ‘usse’),
array(‘label’ => ‘North Central US’, ‘value’ => ‘usnc’),
array(‘label’ => ‘South Central US’, ‘value’ => ‘ussc’),
array(‘label’ => ‘Northwestern US’, ‘value’ => ‘usnw’),
array(‘label’ => ‘Southwestern US’, ‘value’ => ‘ussw’)
)
)
)
)
));
$content = $view->html();
echo $content;

Display a weather map view using the default configuration with custom options for layers (MapListing) component:
https://wxblox.aerisapi.com/[api_key]/[secret_key]/layouts/maps?opts=%7B%22layers%22%3A%7B%22categories%22%3A%5B%5D%22codes%22%3A%5B%22radar%22%2C%22alerts%22%2C%22temperatures%22%5D%7D%7D

Display a weather map view using a custom region selector menu and different categories for the maps listing:
https://wxblox.aerisapi.com/[api_key]/[secret_key]/layouts/maps?opts=%7B%22layers%22%3A%7B%22categories%22%3A%5B%22radar%2Fsat%22%2C%22severe%22%2C%22observations%22%5D%7D%2C%22regions%22%3A%7B%22items%22%3A%7B%22us%22%3A%7B%22label%22%3A%22UnitedState%22%7D%2C%22region%22%3A%7B%22us%22%3A%5B%7B%22label%22%3A%22NortheasternUS%22%2C%22value%22%3A%22usne%22%7D%2C%7B%22label%22%3A%22SoutheasternUS%22%2C%22value%22%3A%22usse%22%7D%2C%7B%22label%22%3A%22NorthCentralUS%22%2C%22value%22%3A%22usnc%22%7D%2C%7B%22label%22%3A%22SouthCentralUS%22%2C%22value%22%3A%22ussc%22%7D%2C%7B%22label%22%3A%22NorthwesternUS%22%2C%22value%22%3A%22usnw%22%7D%2C%7B%22label%22%3A%22SouthwesternUS%22%2C%22value%22%3A%22ussw%22%7D%5D%7D%7D%7D%7D

Last modified: July 15, 2019