Map View Configuration

When creating a map view, you have the option to pass additional configuration options to override the default setup. These options are provided as a simple object and can contain values for any one or all of the supported options as outlined below.

Configuration

The following options are supported when configuring your MapView instance:

Option	Type	Description	Default
account	`Account`	Xweather Account instance to use with the map view data (required).
map	`object`	Map configuration options.
map.layers	`object`	An object containing the layers to display on the map grouped by category.
map.layers.base	`string[]`	An array of base layer codes, which will be rendered at the bottom of the layer stack.	`['flat']`
map.layers.data	`string[]`	An array of weather data layer codes, which will be rendered above base layers but below overlay layers.
map.layers.overlays	`string[]`	An array of overlay layer codes, which will be rendered above data layers.	`['admin']`
map.layers.text	`string[]`	An array of text layer codes, which will be rendered at the top of the layer stack.
map.center	`string`, `object`	Center of the map, either as a place string or ICoordinate object.
map.zoom	`number`	Zoom level.	`3`
map.bounds	`object`	Coordinate bounds of the visible region as an ICoordinateBounds object.
map.size.width	`number`	Map image width.
map.size.height	`number`, `'auto'`	Map image height, which can either be a number or `auto`. If`auto` is used, then the image height will be determined by the configured width and the value for `factor`.	`auto`
map.size.factor	`number`	Aspect ratio of width-to-height. This value is used when calculating an `auto` height based on the configured width.	`0.75`
map.metric	`boolean`	Whether text layers should display values in Metric units.	`false`
map.offset	`number`, `string`	Time offset either as a UNIX timestamp as a number or a relative offset as a string (e.g. `-6hours`).
map.combined	`boolean`	Whether all layers should be combined together into a single image. This results in fewer requests but increased map units since `base` and `overlay` layers will be requested each time `data` and/or `text` layers change.	`false`
map.autoFuture	`boolean`	Whether corresponding future layers should automatically be added to the map when adding a data layer when available.	`true`
animation	`object`	Provides the configuration options for the map's internal animation timeline.
animation.enabled	`boolean`	Whether animation should be enabled for the map view.	`true`
animation.from	`number`	Start time offset of the map's timeline relative to now, in seconds. Value must be less than `timeline.to`.	`-2 * 3600`
animation.to	`number`	End time offset of the map's timeline relative to now, in seconds. Value must be greater than or equal to `timeline.from`.	`0`
animation.intervals	`number`	The number of images used to produce the animation between `timeline.from` & `timeline.to`. Used for image and tile-based animations.	`10`
animation.duration	`number`	Duration of the animation in seconds.	`2`
animation.endDelay	`number`	End delay in seconds, which is the duration of the hold time on the last frame before restarting playback at the beginning.	`1`
animation.autoplay	`boolean`	Whether the animation should begin playing immediately when the map view is first rendered.	`false`
animation.alwaysShowPast	`boolean`	Whether the map view should display past data layers for both past and future time periods.	`false`
animation.alwaysShowFuture	`boolean`	Whether the map view should display future data layers for both past and future time periods.	`false`
overlays	`object`	Overlay configuration options.
overlays.branding	`object`	Optional branding element to display over the map view.
overlays.branding.html	`string`	HTML string content. Takes precedence over `img` when both are provided.
overlays.branding.img	`string`	URL for the image source.
overlays.timestamp	`string`	Timestamp output format using the available formatting strings (opens in a new tab).	`MM/DD/YYYY hh:mm A`
overlays.title	`string`	Map title, which will be displayed in a title bar element across the top-left of the map view. Title bar can be customized using CSS overrides as needed.
controls	`object`	Controls configuration options.
controls.layers	`object[]`	An array of layer-related controls to display above the map view.
controls.layers[#].title	`string`	Button label title.
controls.layers[#].value	`string`	Xweather Mapping Platform (Raster Maps) layer string.
controls.regions	`object[]`	An array of region/zoom-related controls to display along the bottom of the map view.
controls.regions[#].title	`string`	Button label title.
controls.regions[#].center	`string`, `object`	Map center location, which can either be a place name (e.g. `seattle,wa`) or coordinate (e.g. `{ lat: 39.5, lon: -120.5 }`).
controls.regions[#].zoom	`number`	Map zoom level.
controls.regions[#].region	`string`	Region code. Map bounds will be updated to this region's coordinate bounds when selected if the region has been defined.
controls.regions[#].bounds	`object`	Map coordinate bounds as an ICoordinateBounds object.

The following is the default configuration object for a MapView instance:

{
    account: undefined,
    map: {
        zoom: 7,
        layers: {
            base: ['flat'],
            overlays: ['admin']
        },
        size: {
            width: 'auto',
            height: 'auto',
            factor: 0.75,
            autoscale: false
        },
        autoFuture: true,
        combine: false
    },
    animation: {
        enabled: true,
        from: -2 * 3600,
        to: 0,
        autoplay: false,
        alwaysShowPast: false,
        alwaysShowFuture: false
    },
    overlays: {
        title: undefined,
        timestamp: 'MM/DD/YYYY hh:mm A',
        branding: {
            html: undefined,
            img: undefined
        }
    },
    legend: {
        enabled: true
    },
    controls: {
        layers: undefined,
        regions: undefined
    }
}

Map View Events