March 16

Enhance Your Storm Tracking With the Severe Weather Module

A year ago, we introduced two new modules to use with the AerisWeather Javascript SDK, InteractiveMap, and InteractiveMapApp. With severe weather season just around the corner, Aerisweather has added another module to its stable: The Severe Weather Module.

The Severe Weather Module

The Severe Weather Module is another map module that utilizes our Map Module Starter Project, similar to our Observations and COVID-19 modules. The purpose is to provide an enhanced mapping experience for tracking severe weather through custom visualizations of data currently available via the Javascript SDK.

Severe Weather Module Example

Features

The Severe Weather Module provides users with an array of layers that one would want when tracking severe weather (beyond radar and satellite). It also enhances some of the layers to provide more detail compared to the default SDK implementations. The Storm Tracks layer takes the

stormcells

data to plot a vector of its movement. It also provides the user deeper insight on the storm cell info in a custom infopanel upon selecting. Upon selection of a storm cell or its vector, a custom infopanel will display. This infopanel will provide the user with deeper insight into the storm cell properties and affected cities.

Storm Cell Info Box example

Additional custom layers include

Storm Threats

and

Lightning Threats

. When selected, these layers will plot polygons outlining the areas where storm or lightning threats exist. The

Warnings

layer option provides a custom call to the AerisWeather API to request severe related warnings, like severe thunderstorm, tornado, and flash flood warnings.

Using the Severe Weather Module

The Severe Weather module can be quickly integrated into an InteractiveMap or InteractiveMapApp using the precompiled version. Alternatively, embed the module into a Javascript project using the source from our GitHub repository.

Precompiled Module

Using the precompiled version of the module is the easiest method for integrating it into your maps. Just load our precompiled script into your HTML and add it to your maps:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<title>AerisWeather JavaScript SDK - Severe Weather Module</title>
        <link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">
	<style>
	    html, body {
		height: 100%;
		margin: 0;
		padding: 0;
		width: 100%;
	    }
            #app {
                height: 100%;
                width: 100%;
            }
	</style>
</head>
<body>

    <div id="app"></div>

<script>
window.addEventListener('load', () => {

    const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');

    aeris.apps().then((apps) => {
        const app = new apps.InteractiveMapApp('#app', {
            // config options...
        });
        app.on('ready', () => {
            app.modules.add(new Severe());
        });
    });

});
</script>

<script src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
<script src="https://cdn.aerisapi.com/sdk/js/modules/awxjs-severe-weather.min.js"></script>

</body>
</html>

Integrating the Module Source

If you are developing your JavaScript application using a NodeJS server or using NPM libraries, you can use the source files in this repository and import them as needed within your maps.

NOTE: This module is developed using Typescript and modern ES6 Javascript syntax. If you need the module’s Typescript source compiled to Javascript, run yarn build from the project’s directory and use the compiled source files located within the dist/src/ directory.

The following is an example of importing and using the project source files in your Javascript project:

import AerisWeather from '@aerisweather/javascript-sdk/dist/AerisWeather';
import InteractiveMapApp from '@aerisweather/javascript-sdk/dist/apps/InteractiveMapApp';
import Severe from 'path/to/awxjs-severe-weather-module/dist/src/Severe';

const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');

const app = new apps.InteractiveMapApp('#app', {
    account: aeris.account(),
    // config options...
});
app.on('ready', () => {
    app.modules.add(new Severe());

Next Steps

If you’d like to learn more about this particular module, check out our Github repository. For more information on how to build your own custom module for the Javascript SDK, check out this blog post which uses our Observations module as an example. Happy coding!

Demos

Visit our Demos to see the Severe Weather Module in action as part of our Airports and Facilities Demos!

Post Details

Posted by Ben Collin at 7:21 pm