Map Modules with InteractiveMapApp
An InteractiveMapApp instance contains an internal module manager that is responsible for setting up and managing modules when they are added to and/or removing from a map application. This manager can be accessed via the modules property on an InteractiveMapApp instance and is what you'll be working with when adding and removing modules from your own application.
Adding a Module
In order to use a map module within your own map application, you'll first need to import the module's source via import if using NPM modules or include the pre-compiled Javascript file for the module using <script> or other include methods. Our SDK provides a variety of built-in modules that are loaded into your applications a little differently, so be sure to read the setup details below when using these modules. Beyond our built-in offerings, modules may also be provided as completely separate NPM modules and/or pre-compiled scripts hosted remotely, especially if they are third-party modules.
Once you've imported or included the desired module library, use the add(:module) method on the application's module manager to add the module to your application instance. This method requires at least one parameter, which is an instance of the module you want to add.
The following would add the SampleModule to the map application, which would either be a module provided as a pre-compiled Javascript file or NPM module depending on how the module is offered:
app.modules.add(new SampleModule());If this module defines a button configuration for the map application's layers panel, then the module's controls would be appended to the bottom of the existing controls within the layers panel.
Some modules may require additional configuration when instantiated. If this is the case for the module you're adding, you can provide the configuration options to the module's constructor when adding it to your map application:
app.modules.add(new SampleModule({
test: true
}));Refer to the module's documentation for specific information regarding the available configuration options that are supported.
Adding a Module at a Specific Index
If a module provides a button configuration for the layers panel, using the add() method above will just append the module's controls to the bottom of the panel. However, you may want to control the insertion position of a module's controls when adding it to your application. For this you would use insertAt(:index, :module) instead.
The following would insert the controls associated with the SampleModule at an index of 5:
app.modules.insertAt(5, new SampleModule());If the specified index is greater than the total number of controls existing within the layers panel, then the module's controls will be appended to the bottom of the stack.
As with add(), you can also provide any configuration options to the module:
app.modules.insertAt(5, new SampleModule({
test: true
}));Overriding Default Module Configurations
Map modules are required to provide the necessary configurations for various components within a map application, such as the data requests and styling, buttons in the layers panel, legends, and info panel views. At a minimum, all map modules must provide a valid configuration for its map data source. All other configurations are optional.
If you are adding an existing map module to your map application but want to customize some of its configuration, such as changing its marker or polygon styling, you can override the module's defaults with your own configurations for one or all of the components.
Overrides should be provided as the last argument to add() or insertAt() after the module instance. This argument is optional, but if it is provided, it must be an object that contains the proper configuration format expected for the specific map data source type:
{
source: {
// map data source configuration
},
controls: {
// layer control configuration
},
legend: {
// legend configuration
},
infopanel: {
// infopanel configuration
}
}For example, the following would use the same SampleModule but override the default marker styling based on our custom style configuration and a custom control in the layers panel:
app.modules.add(new SampleModule(), {
source: {
style: {
marker: {
svg: {
shape: {
fill: {
color: '#ff0000'
},
stroke: {
color: '#ffffff',
width: 2
}
}
}
}
}
},
controls: {
value: 'custom-module',
title: 'Custom Module'
}
});The following is a similar example, but providing additional configuration options to the module's constructor as explained above:
app.modules.add(new SampleModule({
test: true
}), {
source: {
style: {
marker: {
svg: {
shape: {
fill: {
color: '#ff0000'
},
stroke: {
color: '#ffffff',
width: 2
}
}
}
}
}
},
controls: {
value: 'custom-module',
title: 'Custom Module'
}
});Note that configuration options related to module-specific functionality must be provided in the module's constructor, whereas module overrides that pertain to the application must be provided as the last argument to add() or insertAt().
Refer to the documentation about creating a map module for additional information about these module configuration options and the supported values if you wish to override them.
Removing a Module
Once a module has been added to a map application, you can easily remove it which will remove any existing map data source, layers panel controls and all other related content for that module from your application.
To remove a module, use the remove(:module) method on your map application's module manager, passing the module instance as the only argument:
const moduleInstance = new SampleModule();
app.modules.add(moduleInstance);
...
app.modules.remove(moduleInstance);Alternatively, since each module must have a unique identifier, you can remove modules by their unique identifier instead of their instance:
const moduleInstance = new SampleModule();
app.modules.add(moduleInstance);
...
// removing by referencing the module instance's `id` property
app.modules.removeById(moduleInstance.id);
// or removing by passing the identifier directly
app.modules.removeById('sample-module');Built-in Modules
Built-in map modules are included as part of our Javascript SDK. However, to reduce our SDK's weight within your applications, built-in modules are lazy-loaded (opens in a new tab) and are only loaded on-demand when requested. If you don't use a particular module, then it won't be loaded which will result in reduced weight (opens in a new tab) of the SDK within your application.
Instead of instantiating a new instance of built-in modules when adding them to your map applications, you just need to provide a reference to the module from the modules library of the SDK.
For instance, the following would add the built-in FlightRules module to an application:
aeris.apps().then((apps) => {
const app = new apps.InteractiveMapApp('#app', {
// map app config
});
aeris.modules().then((modules) => {
// Add the built-in FlightRules module
app.modules.add(modules.aviation.FlightRules);
});
});You would use a similar approach when inserting the module at a specific index:
aeris.apps().then((apps) => {
const app = new apps.InteractiveMapApp('#app', {
// map app config
});
// modules are lazy-loaded asynchonously when requested using
// the `aeris.modules()` method
aeris.modules().then((modules) => {
// Add the built-in FlightRules module
app.modules.insertAt(5, modules.aviation.FlightRules);
});
});Overriding Default Built-in Module Configurations
Similar to external modules, you can also override the default configurations for built-in modules using the same approach. Just provide your configuration overrides as the last parameter to the add() and insertAt() methods.
For example, the following example would override the built-in tropical Systems module to add a third filter option to the controls to show test storm data:
aeris.modules().then((modules) => {
app.modules.add(modules.tropical.Systems, {
controls: {
segments: [{
title: 'Active Cyclones',
value: 'active,geo'
},{
title: 'All Cyclones',
value: 'active;notactive,geo'
},{
title: 'Test Cyclones',
value: 'test,geo'
}]
}
});
});Refer to the configuration overrides section above for more details.