WeatherBlox - Map Viewer

Object

aeris.wxblox.views.MapViewer

Data Usage

Raster Maps usage based on size of map and total layers.

A MapViewer view is responsible for displaying and managing a weather map consisting of one or more data layers. This view also handles animating weather data across a specific time range.

Examples

Display a MapViewer component with navigation options to change the zoom level and layer data types centered on Austin, TX:


const view = new aeris.wxblox.views.MapViewer('#wxblox', {
    map: {
    loc: 'austin,tx',
        data: ['radar']
    },
    controls: {
        layers: [{
            value: 'radar',
            title: 'Radar'
        },{
            value: 'satellite',
            title: 'Satellite'
        },{
            value: 'alerts',
            title: 'Advisories'
        },{
            value: 'temperatures,clip-us-flat',
            title: 'Temps'
        }],
        regions: [{
            zoom: 7,
            title: 'Local'
        },{
            zoom: 5,
            title: 'Regional'
        },{
            region: 'us',
            title: 'National'
        }]
    }
});
view.load();

Configuration

The following configuration options are supported by this view:

Option	Description	Default
`map`	Type: `object` ()
`map.layers`	Type: `object` ()
`map.layers.base`	Type: `array` ()	`['flat']`
`map.layers.overlays`	Type: `array` ()	`['admin']`
`map.layers.data`	Type: `array` ()	`undefined`
`map.center`	Type: `string` ()	`null`
`map.zoom`	Type: `number` ()	`3`
`map.bounds`	Type: `string` ()	`undefined`
`map.region`	Type: `string` ()	`undefined`
`map.size.width`	Type: `number` ()	`auto`
`map.size.height`	Type: `number` ()	`auto`
`map.size.factor`	Type: `number` ()	`0.75`
`map.offset`	Type: `string` ()	`undefined`
`map.autoFuture`	Type: `boolean` ()	`true`
`map.combine`	Type: `boolean` ()	`false`
`animation`	Type: `object` ()
`animation.enabled`	Type: `boolean` ()	`true`
`animation.from`	Type: `number` ()	`-2 * 3600`
`animation.to`	Type: `number` ()	`0`
`animation.duration`	Type: `number` ()	`2`
`animation.endDelay`	Type: `number` ()	`1`
`animation.intervals`	Type: `number` ()	`10`
`animation.autoplay`	Type: `boolean` ()	`false`
`animation.refresh`	Type: `number` ()	`300`
`overlays`	Type: `object` ()
`overlays.title`	Type: `string` ()	`undefined`
`overlays.timestamp`	Type: `string` ()	`MM/DD/YYYY hh:mm A`
`overlays.timestamp.format`	Type: `string` ()	`undefined`
`overlays.timestamp.continuous`	Type: `boolean` ()	`true`
`overlays.branding`	Type: `object` ()
`overlays.branding.img`	Type: `string` ()	`undefined`
`overlays.branding.html`	Type: `string` ()	`undefined`
`selectors`	Type: `object` ()
`controls`	Type: `object` ()
`controls.layers`	Type: `array` ()	`null`
`controls.layers[#].value`	Type: `string` ()
`controls.layers[#].title`	Type: `string` ()
`controls.regions`	Type: `array` ()	`null`
`controls.regions[#].zoom`	Type: `number` ()
`controls.regions[#].loc`	Type: `string` ()
`controls.regions[#].title`	Type: `string` ()
`enabled`	Type: `boolean` ()	`true`
`metric`	Type: `boolean` ()	`false`
`renderNoData`	Type: `boolean` ()	`true`
`request`	Type: `object` ()

Methods

The following methods are supported by instances of this view:


viewer()


rendered()


show()


hide()


params()


setUnits(:number)


units()


enabled()


setMetric(:boolean)


load(:object)


refresh()


isMetric()

Events

The following events are triggered by instances of this view:


render


render:before


render:after


load:start


load:done


load:error


change:units