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.

Configuration

The following options are supported when configuring your Map instance:

Option	Type	Description	Default
strategy	`string`	The third-party mapping library code to use. Supports `leaflet`, `maplibre`, `mapbox`, `google` or `openlayers`.	`leaflet`
accessToken	`string`	The token required to use some mapping libraries such as Google or MapBox.
center	`ICoordinate`	The geographical coordinate to center the map on initially. Must be a valid `ICoordinate` object, e.g. `{ lat: 38.5, lon: -121.5 }`
zoom	`number`	The initial zoom level of the map.
metric	`boolean`	Whether the current map units are set to metric.	`false`
timeline	`object`	Provides the configuration options for the map's internal animation timeline.
timeline.from	`number`	Start time offset of the map's timeline relative to now, in seconds. Value must be less than `timeline.to`.	`-2 * 3600`
timeline.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`
timeline.intervals	`number`	The number of images used to produce the animation between `timeline.from` & `timeline.to`. Used for image and tile-based animations.	`10`
timeline.bufferIntervals	`number`	The 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.duration	`number`	The duration, in seconds, for a single loop of the animation to complete. A higher value will result in a slower animation.	`2`
timeline.endDelay	`number`	The delay, in seconds, to hold the last frame of the animation before returning playback from the beginning.	`1`
timeline.alwaysShowPast	`boolean`	Whether the map should display past data layers for both past and future time periods.	`false`
timeline.alwaysShowFuture	`boolean`	Whether the map should display future data layers for both past and future time periods.	`false`
timeline.showLoadingIntervals	`boolean`	Whether 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.resetOnBoundsChange	`boolean`	Whether 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`
styles	`object`	Custom style definitions per layer code. See Styling a Weather Map for more information.
layers	`string`, `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`.
refresh	`number`	Data update interval in seconds. Setting this value to `0` will disable auto-updating of map data.	`0`
reloadOnBoundsChange	`boolean`	Whether 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.

Option	Type	Description
layer	`string`	The layer code to add to the map.
options	`object`	The 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.

Interactive Map Events