Map Modules with InteractiveMap

You can also use any map module with an InteractiveMap instance. For this use case, you only need to access the module's source configuration to add it to your interactive map.

Adding a Module

In order to use a map module within your own interactive map, 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 addModule(:module) method on the map instance to add it to your interactive map. This method requires one parameter, which is an instance of the module you want to add. The module must either be an instance of the module class if loaded statically or a reference to an asynchronous module loader if lazy-loaded.

The following would add the data source associated with the SampleModule to the interactive map, which would either be a module provided as a pre-compiled Javascript file or NPM module depending on how the module is offered:

map.addModule(new SampleModule());

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 interactive map:

map.addModule(new SampleModule({
    test: true
}));

Refer to the module's documentation for specific information regarding the available configuration options that are supported.

Overriding Default Module Configurations

Map modules are required to provide the necessary configuration for data requests and styling that represent the module's data on a map.

If you are adding an existing map module to your interactive map 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 addModule() after the module instance. This argument is optional, but if it is provided, it must be an object that contains the proper structure and configurations.

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:

map.addModule(new SampleModule(), {
    style: {
        marker: {
            svg: {
                shape: {
                    fill: {
                        color: '#ff0000'
                    },
                    stroke: {
                        color: '#ffffff',
                        width: 2
                    }
                }
            }
        }
    }
});

The following is a similar example, but providing additional configuration options to the module's constructor as explained above:

map.addModule(new SampleModule({
    test: true
}), {
    style: {
        marker: {
            svg: {
                shape: {
                    fill: {
                        color: '#ff0000'
                    },
                    stroke: {
                        color: '#ffffff',
                        width: 2
                    }
                }
            }
        }
    }
});

Note that configuration options related to module-specific functionality must be provided in the module's constructor, whereas module overrides that pertain to the interactive map must be provided as the last argument to addModule().

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 an interactive map, only the data source associated with that module gets added to the map. Therefore, to remove it from your map, just request the map data source associated with the module's identifier, module.id. Then remove that map data source from your map:

const source = map.getSourceForId(id);
if (source) {
    map.removeSource(source);
};

Built-in Modules

Built-in map modules are included as part of our Javascript SDK. However, to reduce our SDK's file size within your applications, built-in modules are lazy-loaded (opens in a new tab) and are only loaded 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, you just need to provide the module's reference from the modules library of the SDK.

For instance, the following would add the built-in FlightRules module to an interactive map instance:

aeris.views().then((views) => {
    
    const map = new views.InteractiveMap('#map', {
        // map config
    });
 
    // modules are lazy-loaded asynchonously when requested using 
    // the `aeris.modules()` method
    aeris.modules().then((modules) => {
 
        // Add the built-in FlightRules module
        map.addModule(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 addModule() method on your interactive map instance.

For example, the following example would override the built-in tropical Systems module to use the test filter for requests, which will return test storm data instead:

aeris.modules().then((modules) => {
    map.addModule(modules.tropical.Systems, {
        data: {
            request: {
                parameters: {
                    filter: 'test,geo'
                }
            }
        }
    });
});

Refer to the configuration overrides section above for more details.