February 11

Creating Severe Weather Storm Threats Visuals

As March approaches, so does the potential of severe weather within the United States. Severe storms with frequent lightning, hail, and tornadoes often begin in the southern plains and the southeast, with the severe potential shifting northward as spring advances. There is a continued need to quickly and accurately inform the public with this extreme weather. To assist, AerisWeather offers a suite of severe weather APIs, map layers, threats WeatherBlox widgets, and the severe weather module for use within interactive maps for the purposes of creating weather threats visuals.

A unique severe weather endpoint within the AerisWeather API is the Threats endpoint. The threats endpoint provides information on potential storm threats affecting locations throughout the US, including Puerto Rico and Guam. We discussed this powerful and unique endpoint in a previous blog post, Track Severe Weather with the Threats Endpoint. Today, we will demonstrate how to visualize Threats using WeatherBlox.

Threats with WeatherBlox

WeatherBlox offers a variety of weather-related widgets that are available as individual views and complete layouts for use on websites.

Threats View

Related to severe weather threats, WeatherBlox offers the Threats view. You can add this small widget to a website to display current severe weather threats within the USA, including Puerto Rico and Guam.

Severe Storm Threats WeatherBlox Example

Severe Storm Threats WeatherBlox Example

To add the Threats view widget to your website, use the following JavaScript snippet or the WeatherBlox Wizard. Remember to replace   and   with your own client id and key. Additionally, replace “Atlanta, GA” with the location to display storm threats.

 

Note that when there are no storm threats, the widget will be an empty div tag.

To allow searching locations, we can combine the WeatherBlox Threats widget with the WeatherBlox Search widget, as in the following snippet and within this working example.

Storm threat with search box example

Storm threat with search box example



}); // End view / layout code

// Display no active threats if the widget is blank
threatsView.on(‘render:after’, () => {
let threatHTML = document.querySelector(‘#wxblox .awxb-local’);
if (threatHTML && threatHTML.childNodes.length <= 1) {
threatHTML.innerHTML = ;
}
});

// add the search box
const search = new aeris.wxblox.views.PlaceSearch(‘#search’);
search.on(‘select’, function (e) {
let p = e.data.place;
placeName = p.place.name;
stateOrCountry = (p.place.state) ? p.place.state : p.place.country;
threatsView.load({
p: placeName + ‘,’ + stateOrCountry
});
});

});
</script>

</body>
</html>

In the above example, along with integrating the search widget, we also added a  event handler to check if no threats were active and display a message as seen below:

Storm Threats Widget with no Active Threats

Storm Threats Widget with no Active Threats

Local Layout

In addition to the Storm Threats view, WeatherBlox also offers a full-page local weather layout that includes the Threats view, though only displaying the view when storm threats are active.

WeatherBlox Local Layout with Active Storm Threat Example

WeatherBlox Local Layout with Active Storm Threat Example

The full-page local view may be integrated using the following example or, better yet, utilize the WeatherBlox Wizard. Remember to replace   and   with your client id and key.

 

Next Steps

Start offering enhanced severe storm threat information to your users today! Contact our sales team or sign up for a developer account to get started today!

Share this post:

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.