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. Currently only leaflet is supported. leaflet
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.
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
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.

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.Interactive('#map', {
    layers: 'radar,stormreports'
});

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

const map = new views.Interactive('#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.Interactive('#map', {
    layers: [{
        layer: 'radar',
        options: {
            style: {
                opacity: 0.5
            }
        }
    },{
       layer: 'stormreports',
       options: {
           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.