Creating Map Module Groups

Map module groups allow you to group a collection of individual modules into a single module and add that group to a map application instead of multiple related modules. This feature is useful if you want to create a series of related modules, such as a series of modules related to tropical weather or aviation.

Getting Started

To create a module group, you’ll need to create a new class that extends the SDK’s ModuleGroup base class and assign it a unique identifier:

import ModuleGroup from '@aerisweather/javascript-sdk/dist/modules/ModuleGroup';

class MyModule extends ModuleGroup {

    get id() {
        return 'my-module';
    }

    async load() {
        return new Promise((resolve, reject) => {
           
        }).catch((error) => {
            
        });
    }
    
    controls() {
        
    }
}

Then, determine the collection of MapSourceModule subclasses you want to add to the module group. You’ll need to load and setup these child modules by overriding the load() method on your ModuleGroup subclass. This method should return a Promise containing the array of module instances that belong to the group:

import ModuleGroup from '@aerisweather/javascript-sdk/dist/modules/ModuleGroup';
import MyModuleA from './MyModuleA';
import MyModuleB from './MyModuleB';

class MyModule extends ModuleGroup {

    get id() {
        return 'my-module';
    }

    async load() {
        // create instances of all individual MapSourceModules that are 
        // part of this group
        const moduleA = new MyModuleA();
        const moduleB = new MyModuleB();

        return new Promise((resolve, reject) => {
            // store the array of child modules
            this._modules = [moduleA, moduleB];
            resolve(this._modules);
        }).catch((error) => {
            console.error('AerisWeather.Module - ERROR', error);
        });
    }
}

This method returns a Promise since modules can be lazy-loaded on demand, which is how the Aeris Javascript SDK handles all built-in map modules. For instance, the following load() method waits for each lazy-loaded child module to load before resolving the group’s load Promise. Each child module exports a loader function, which is used to lazy-load and return that module:

import ModuleGroup from '@aerisweather/javascript-sdk/dist/modules/ModuleGroup';
import { loader as MyModuleA } from './MyModuleA';
import { loader as MyModuleB } from './MyModuleB';

class MyModule extends ModuleGroup {

    get id() {
        return 'my-module';
    }

    async load() {
        // wait for each lazy-loaded module to load before resolving the Promise
        // each module exports itself as the default module
        const moduleA = await new MyModuleA();
        const moduleB = await new MyModuleB();

        return new Promise((resolve, reject) => {
            // store the child modules as an array of instances
            this._modules = [moduleA, moduleB].map((m) => new m.default());
            resolve(this._modules);
        }).catch((error) => {
            console.error('AerisWeather.Module - ERROR', error);
        });
    }
}

That’s all that is needed to create a module group. Now you can include a collection of custom modules just by adding the module group to their interactive map application. You’ll likely also want to configure the layers panel controls for the group as well.

Module Group Controls

Similar to individual map source modules, module groups provide its own controls to be included in a map application’s layers panel. Override the controls() method on your ModuleGroup subclass and return the button configuration you want to use for the group. In most cases, you’ll want to include the child module controls in a group in the application.

The following would create a control group named “My Group” and contain the default controls provided by each child module:

controls() {
    return {
        title: 'My Group',
        buttons: this.modules ? this.modules.map((m) => m.controls()) : []
    };
}

In the above example, this.modules references the array of child modules that were loaded by the group using the load() method.

Note that when a module is included as part of a module group, that module will not also add its own layers panel controls outside of the group’s controls.

Last modified: April 13, 2020