Apps 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 Apps module is loaded separately at runtime and only if your code requires access to one or more of the built-in application components, such as the interactive map application. The Apps module public interface is accessed via the apps() 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 Apps module is never loaded.

Working With the Apps 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 Apps module is loaded asynchronously using the apps() 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 apps() which is called once the module is loaded:

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

Once the Apps module is loaded, you can then create instances of InteractiveMapApp using the module's public interface returned to your callback through the apps argument.

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

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

Apps Using an NPM Module

Working with the Apps 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.apps().then((apps) => {
    const app = new apps.InteractiveMapApp('#ia-map', {
        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 Apps module asynchronously as you control how the SDK is packaged into your final product.

For instance, you may want to use an interactive map application 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/apps/InteractiveMapApp';
 
const target = document.getElementById('map');
const app = new InteractiveMapApp(target, {
     // app configuration
});

Views Module Modules Library