Map View

The following examples demonstrate setting up and using the MapView component from the Javascript SDK. The major difference between this Map View and the Interactive Map is that this view does not support user interactions, such as panning, zooming or selecting markers and other map elements.

Getting Started

Getting started with a map view is quick and easy. Simply follow the Getting Started guide for the JavaScript SDK to get setup if you haven't already done so.

The map view feature is part of the Views module of the library. Therefore, you'll need to use the views() method on your AerisWeather instance in order to begin using any of the map view-related features. Read more about working with the Views module.

Initialize your weather map view with your DOM target where it will be rendered and desired configuration options using new views.Map(target, opts) constructor. For example, the following will render a weather map in the DOM target with id mapview centered on Austin, TX with radar and alerts layers and a size of 800x600:

// using Promises
aeris.views().then((views) => {
    const map = new views.Map('#mapview', {
        map: {
            layers: {
                data: 'alerts,radar'
            },
            center: 'austin,tx',
            zoom: 6,
            size: {
                width: 800,
                height: 600
            }
        }
    }
});

Map view centered on Austin, TX

Alternatively, if you're providing a callback function to the views() method:

// using callback function
aeris.views((views) => {
    const map = new views.Map('#mapview', {
        map: {
            layers: {
                data: 'alerts,radar'
            },
            center: 'austin,tx',
            zoom: 6,
            size: {
                width: 800,
                height: 600
            }
        }
    }
});

Adding and Removing Weather Data

Adding and removing weather layers once you've created your map instance is simple. All you need is the layer code associated with the layer you want to add, which is typically the same as the Xweather Raster Maps layer code (opens in a new tab).

Refer to the Managing Layers documentation for more information on adding and removing layers with your map view.

Animating Weather Data

A map's animation is controlled by a single timeline, which is responsible for animating map data across a time period. The timeline will have a starting and ending date and time and only data within that time range will appear on the map.

To begin playing a map animation, use play() on the map's timeline property:

map.timeline.play();

Stopping an animation is similar, except using the stop() method on the timeline:

map.timeline.stop();

You can also check if the map timeline is currently animating, which is useful to create a simple animation toggle function for a button click event handler:

const btnToggle = document.getElementById('btn-toggle');
btnToggle.addEventListener('click', function(e) {
    e.preventDefault();
    if (map.timeline.isAnimating()) {
        map.timeline.stop();
    } else {
        map.timeline.play();
    }
});

Refer to the Timeline documentation for more information on configuring your map's date range and its animation.

Map Controls and Overlays

A MapView instance also supports adding custom controls and overlays to your view, such as a title bar or controls allowing a user to switch the map layers or region dynamically.

Refer to the Overlays and Map Controls documentation for more information on customizing these features of your map view.

Routing Module Configuration