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.


The following options are supported when configuring your MapView instance:

accountAccountXweather Account instance to use with the map view data (required).
mapobjectMap configuration options.
map.layersobjectAn object containing the layers to display on the map grouped by category.
map.layers.basestring[]An array of base layer codes, which will be rendered at the bottom of the layer stack.['flat']
map.layers.datastring[]An array of weather data layer codes, which will be rendered above base layers but below overlay layers.
map.layers.overlaysstring[]An array of overlay layer codes, which will be rendered above data layers.['admin']
map.layers.textstring[]An array of text layer codes, which will be rendered at the top of the layer stack.
map.centerstring, objectCenter of the map, either as a place string or ICoordinate object.
map.zoomnumberZoom level.3
map.boundsobjectCoordinate bounds of the visible region as an ICoordinateBounds object.
map.size.widthnumberMap image width.
map.size.heightnumber, 'auto'Map image height, which can either be a number or auto. Ifauto is used, then the image height will be determined by the configured width and the value for
map.size.factornumberAspect ratio of width-to-height. This value is used when calculating an auto height based on the configured width.0.75
map.metricbooleanWhether text layers should display values in Metric units.false
map.offsetnumber, stringTime offset either as a UNIX timestamp as a number or a relative offset as a string (e.g. -6hours).
map.combinedbooleanWhether 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.autoFuturebooleanWhether corresponding future layers should automatically be added to the map when adding a data layer when available.true
animationobjectProvides the configuration options for the map's internal animation timeline.
animation.enabledbooleanWhether animation should be enabled for the map view.true
animation.fromnumberStart time offset of the map's timeline relative to now, in seconds. Value must be less than * 3600
animation.tonumberEnd time offset of the map's timeline relative to now, in seconds. Value must be greater than or equal to timeline.from.0
animation.intervalsnumberThe number of images used to produce the animation between timeline.from & Used for image and tile-based animations.10
animation.durationnumberDuration of the animation in seconds.2
animation.endDelaynumberEnd delay in seconds, which is the duration of the hold time on the last frame before restarting playback at the beginning.1
animation.autoplaybooleanWhether the animation should begin playing immediately when the map view is first rendered.false
animation.alwaysShowPastbooleanWhether the map view should display past data layers for both past and future time periods.false
animation.alwaysShowFuturebooleanWhether the map view should display future data layers for both past and future time periods.false
overlaysobjectOverlay configuration options.
overlays.brandingobjectOptional branding element to display over the map view.
overlays.branding.htmlstringHTML string content. Takes precedence over img when both are provided.
overlays.branding.imgstringURL for the image source.
overlays.timestampstringTimestamp output format using the available formatting strings (opens in a new tab).MM/DD/YYYY hh:mm A
overlays.titlestringMap 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.
controlsobjectControls configuration options.
controls.layersobject[]An array of layer-related controls to display above the map view.
controls.layers[#].titlestringButton label title.
controls.layers[#].valuestringXweather Mapping Platform (Raster Maps) layer string.
controls.regionsobject[]An array of region/zoom-related controls to display along the bottom of the map view.
controls.regions[#].titlestringButton label title.
controls.regions[#].centerstring, objectMap 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[#].zoomnumberMap zoom level.
controls.regions[#].regionstringRegion code. Map bounds will be updated to this region's coordinate bounds when selected if the region has been defined.
controls.regions[#].boundsobjectMap 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