Map View Controls

To make your map view instance more dynamic, you can configure your view with layer and/or region controls to allow your user to change the content of the map after it's been rendered.

Layer Controls

Layer controls are rendered above your map view and allow the user to change the weather data that's currently displayed on the map. You define layer controls by providing an array of control configuration objects to your map view's controls.layers property.

For example, the following will render layer controls for radar, satellite, alerts and current temperature layers:

const map = new views.Map(document.getElementById('mapview'), {
    map: {
        center: 'minneapolis,mn',
        zoom: 6
    },
    controls: {
        layers: [{
            title: 'Radar',
            value: 'radar'
        },{
            title: 'Satellite',
            value: 'satellite'
        },{
            title: 'Alerts',
            value: 'alerts'
        },{
            title: 'Temps',
            value: 'temperatures,water-flat'
        }]
    }
});

Which will result in the following map view, with the first layer button selected and used to determine which data layer to display initially:

Clicking one of the layer controls at the top will update the map's data layers to that defined by the control's configuration. Any valid Xweather Raster Maps layer can be used as part of the value.

Region Controls

Region controls are rendered in the bottom-left corner of your map view by default and allow the user to change the map view's visible bounds. You define region controls by providing an array of control configuration objects to your map view's controls.regions property. Each region control's configuration can either be defined by a center/zoom or a coordinate bounds object.

For example, the following will render region controls for switching between Minneapolis, United States, and custom coordinate bounds centered on Vancouver, BC:

const map = new views.Map(document.getElementById('mapview'), {
    map: {
        layers: {
            data: ['temperatures,water-flat']
        }
    },
    controls: {
        regions: [{
            title: 'Minneapolis',
            center: 'minneapolis,mn',
            zoom: 7
        },{
            title: 'United States',
            region: 'us'
        },{
            title: 'Vancouver, BC',
            bounds: {
                north: 49.916,
                west: -124.384,
                south: 48.850,
                east: -121.482
            }
        }]
    }
});

The above configuration will result in the following map view, with the first region control selected and used to render the map initially:

Clicking one of the region controls will update the map's visible bounds to those defined by the selected control's configuration.