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 (opens in a new tab) 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('Xweather.Module - ERROR', error);
});
}
}This method returns a Promise since modules can be lazy-loaded on demand, which is how the Xweather 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('Xweather.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.