Managing a Map View

Once you have created an instance of ‘MapView', you can perform various updates to the view at runtime even after the map has been rendered. All changes to a map view must be performed using the map's underlying configuration manager, which is accessible using the ‘config' property of your MapView instance. This property will return the associated MapConfig instance that is currently managing the map view. Therefore, you will be accessing this configuration object when manipulating your map view after initialization.

Layer Groups

A map view divides its layers into four separate groups, each having their own container on the map:

base: Base layers, which will be rendered at the bottom of the layer stack.
data: Weather data layers, which will be rendered above base layers but below overlay layers.
overlays: Overlay layers, which will be rendered above data layers.
text: Text layers, which will be rendered at the top of the layer stack.

Note: It is recommended to use the default vaule of combined, which is false, as it will reduce the number of map units used with your map view. By not combining all layers into a single image, base and overlay layers will only need to be requested once when the map is initially rendered or if you update them using setBase() or setOverlays().

Managing Layers

Map views support a wide array of layers and are added to a map using the supported layer codes. These layer codes correspond to those currently offered through Xweather Raster Maps (opens in a new tab).

Setting Weather Layers

As outlined above, layers are grouped by category which also determines where they are added in the layer stack on your map. Weather-related layers correspond to the data group. Therefore, to update the weather layers for your map view you will need to use the config.setData() method, passing an array of layers codes:

map.config.setData(['satellite', 'radar']);

You can also use layer modifiers or masks with the layers provided:

map.config.setData(['temperatures:80', 'water-flat', 'radar']);

Handling Forecast Layers

Some weather layers have a corresponding forecast layer associated with it, such as temperatures, wind speeds and radar. By default, forecast layers are automatically added to your map view if your map timeline's range extends into the future and the layer has a corresponding forecast layer. You can disable this by setting your map view's autoFuture configuration property to false, which means you will need to add and remove forecast layers manually instead.

For example, if you have autoFuture enabled, your timeline extends into the future and add the radar layer to your map, then the fradar will also be added since it's the forecast radar layer:

// update the timeline to end 2 hours from now
map.timeline.setEndOffset(2 * 3600);
 
// add "radar", which will also add "fradar" automatically
map.config.setData(['radar']);

This will result in a seemless animation between past and future radar data since the map view will automatically show or hide each layer's container depending on whether it's past or future data and the timeline's position.

If you want to continue showing past layers in the future or future layers in the past, simply set the alwaysShowPast and/or alwaysShowFuture configuration options to true for your map view. Enabling these are useful if you want to show daily min/max temperatures without having to adjust the map timeline's playhead position:

const map = new views.Map(document.getElementById('mapview'), {
    map: {
        layers: {
            data: ['ftemperatures-max-text', 'ftemperatures-max']
        },
        center: 'minneapolis,mn',
        zoom: 6
    },
    animation: {
        alwaysShowFuture: true
    }
});

Changing Base & Overlay Layers

You map view's base and overlay layers can be changed after initialization as well. To do so, use the config.setBase() and config.setOverlays() methods.

For instance, the following would update the map view's base layer and overlays to dark versions:

map.config.setBase(['flat-dk']).setOverlays(['counties-dk:50', 'admin-dk']);

Updating a Map Configuration

Once a map view has been rendered, its configuration can be modified using the view's underlying MapConfig instance via the config property accessor on your map view. From here you can change the map's center, bounds, size and more.

Refer to the MapConfig API documentation for the full list of methods available for manipulating your map view.

Events Timeline