Interactive Map Configuration

When creating an interactive weather map, 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 Map instance:

strategystringThe third-party mapping library code to use. Supports leaflet, maplibre, mapbox, google or openlayers.leaflet
accessTokenstringThe token required to use some mapping libraries such as Google or MapBox.
centerICoordinateThe geographical coordinate to center the map on initially. Must be a valid ICoordinate object, e.g. { lat: 38.5, lon: -121.5 }
zoomnumberThe initial zoom level of the map.
metricbooleanWhether the current map units are set to metric.false
timelineobjectProvides the configuration options for the map's internal animation timeline.
timeline.fromnumberStart time offset of the map's timeline relative to now, in seconds. Value must be less than * 3600
timeline.tonumberEnd time offset of the map's timeline relative to now, in seconds. Value must be greater than or equal to timeline.from.0
timeline.intervalsnumberThe number of images used to produce the animation between timeline.from & Used for image and tile-based animations.10
timeline.bufferIntervalsnumberThe number of animation intervals to fully load before playback can begin. If this value is less than the total number of intervals for the animation, the remaining intervals will continue loading in the background during animation playback. This can result in empty or partially rendered intervals depending on network conditions. A value of 0 means the animation will begin playing immediately, whereas a value of -1 means all intervals must load before playback can begin.0
timeline.durationnumberThe duration, in seconds, for a single loop of the animation to complete. A higher value will result in a slower animation.2
timeline.endDelaynumberThe delay, in seconds, to hold the last frame of the animation before returning playback from the beginning.1
timeline.alwaysShowPastbooleanWhether the map should display past data layers for both past and future time periods.false
timeline.alwaysShowFuturebooleanWhether the map should display future data layers for both past and future time periods.false
timeline.showLoadingIntervalsbooleanWhether intervals should appear during an animation while still loading. If false, then only fully loaded intervals will appearing during animation playback when bufferIntervals is less than the total intervals in the animation.false
timeline.resetOnBoundsChangebooleanWhether the timeline should be reset after the visible map region changes. If true, then any playing animation will stop and all cached data will be removed, which will require animation data to be reloaded when playing the animation again. Setting this to true will result in less Raster Maps accesses consumed by your interactive map, otherwise new Raster Maps tiles for new map regions will be loaded as required by the currently playing animation.false
stylesobjectCustom style definitions per layer code. See Styling a Weather Map for more information.
layersstring, string[], object[]The initial layers to render on the map, either as an array of layer code strings, a comma-separated list of layer codes, or an array of layer configuration objects. Refer to the Layer Options section below for more details about using the object method for layers.
refreshnumberData update interval in seconds. Setting this value to 0 will disable auto-updating of map data.0
reloadOnBoundsChangebooleanWhether map data sources should be reloaded automatically when the map bounds have changed. Disabling this feature will reduce data and map unit usage.true

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

    strategy: 'leaflet',
    zoom: 7,
    timeline: {
        from: -2 * 3600,
        to: 0,
        intervals: 10

Configuring Initial Layers

When you instantiate your map instance, you can provide the intial layers you want to add to the map by setting the layers property in your map's configuration as outlined above. This value can be a comma-separate string of layer codes, an array of layer codes or an array of layer configuration objects.

The following would create a weather map with the radar and stormreports layers using a comma-separated string:

const map = new views.InteractiveMap('#map', {
    layers: 'radar,stormreports'

Alternatively, the above could also use an array of layer codes:

const map = new views.InteractiveMap('#map', {
    layers: ['radar', 'stormreports']

The above implementations will use the default configurations for the layers when they are added to the map. However, if you need to customize the layers further when they are added, you can also provide an array of layer configuration objects.

For example, the following will use the same radar and stormreports layers but provide additional configuration for each layer: setting the radar opacity to 0.5 and only show rain-related storm reports:

const map = new views.InteractiveMap('#map', {
    layers: [{
        layer: 'radar',
        options: {
            style: {
                opacity: 0.5
        layer: 'stormreports',
        options: {
            data: {
                request: {
                    parameters: {
                        filter: 'rain'

Refer to the Layer Options section below for more details about the available layer configuration options.

Layer Options

If you are providing an array of objects for the layers property in your map configuration above, each object in the array should provide the layer code to use and an optional configuration object for that layer.

layerstringThe layer code to add to the map.
optionsobjectThe configuration object to use for the layer. This is the same object you would use when adding the layer directly via addLayer().

Refer to the Managing Layers documentation and the LayerOptions interface for more information about the available properties when configuring your layer for the map.