Views Module

When implementing the Xweather JavaScript SDK using the core AerisWeather public interface, the library is broken into four separate libraries: (1) the core library and data/map request functionality, (2) core map and legend views, (3) feature rich map application, and (4) modules/extensions library.

In order to reduce the library file size, the Views module is loaded separately at runtime and only if your code requires access to one or more of the built-in views, such as the interactive map or map view. The Views module public interface is accessed via the views() method on your AerisWeather instance and is only loaded whenever you access this method for the first time. Therefore, if you only need the core requests functionality in your project, the Views module is never loaded.

Working With the Views Module

While all of this happens automatically within the SDK, you should be aware of how this affects instantiation of view-related components. The library's Views module is loaded asynchronously using the views() method, which means you'll need to wait for it to be loaded before working with any of its features. You can use the Promise (opens in a new tab) that's returned, or provide a callback function as a parameter to view() which is called once the module is loaded:

// load the Views module using with Promise
aeris.views().then((views) => {
    // "views" in this context is the public interface you'll use
    // to create your views
});
 
// load the Views module with a callback function
aeris.views((views) => {
    // "views" in this context is the public interface you'll use
    // to create your views
});

Once the Views module is loaded, you can then create instances of InteractiveMap or MapView using the module's public interface returned to your callback through the views argument.

For instance, the following code would setup the SDK and add an instance of InteractiveMap to the page:

const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
aeris.views().then((views) => {
    const map = new views.InteractiveMap('#ia-map', {
        strategy: 'leaflet',
        zoom: 4,
        layers: 'satellite,radar'
    });
});

Views Using an NPM Module

Working with the Views module when using our NPM module for the SDK is similar to the above, except that you would need to import the core AerisWeather entry point to setup the SDK with your Aeris account credentials:

import aeris from '@aerisweather/javascript-sdk';
 
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
aeris.views().then((views) => {
    const map = new views.InteractiveMap('#ia-map', {
        strategy: 'leaflet',
        zoom: 4,
        layers: 'satellite,radar'
    });
});

However, when using the SDK as modules instead of the compiled script, you have the option of importing individual modules from the library and instantiating objects directly. In this case, you don't need to use the primary AerisWeather entry point for the SDK. This means you also don't have to worry about loading the Views module asynchronously as you control how the SDK is packaged into your final product.

For instance, you may want to use an interactive map in your existing JavaScript project that is already setup using NPM and webpacker. You may setup your file similar to:

import InteractiveMap from '@aerisweather/javascript-sdk/maps/interactive/InteractiveMap';
 
const target = document.getElementById('map');
const map = new InteractiveMap(target, {
     // map configuration
});

Module Usage Apps Module