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
To add the Threats view widget to your website, use the following JavaScript snippet or the WeatherBlox Wizard. Remember to replace
CLIENT_ID
 and
CLIENT_KEY
 with your own client id and key. Additionally, replace “Atlanta, GA” with the location to display storm threats.
<link href="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.css" rel="stylesheet"/>
<script src="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.js"></script>
<!-- DOM target where the WeatherBlox view will be rendered -->
<div id="wxblox"></div>
<script>
const aeris = new AerisWeather('CLIENT_KEY', 'CLIENT_KEY');
aeris.on('ready', () => {
// Insert view / layout code below
var view = new aeris.wxblox.views.Threats('#wxblox');
view.load({
p: 'Atlanta, GA'
}); // End view / layout code
});
</script>
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
<!DOCTYPE html>
<html lang="en">
<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>Storm Threats Widget Examples</title>
<link href="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.css" rel="stylesheet"/>
<script src="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.js"></script>
<style>
#search, #wxblox {
width: 500px;
}
</style>
</head>
<body>
<h2>Storm Threats Widget Example</h2>
<!-- DOM target where the WeatherBlox view will be rendered -->
<div id="search"></div>
<div id="wxblox"></div>
<script>
const aeris = new AerisWeather('q2ZG1wIYyW5jz2qMVs4XV', 'T15iEonob1d2H8kUPkbqlfk4gE2MvYQwiFbNfCVA');
aeris.on('ready', () => {
// our default city
let placeName = 'Atlanta';
let stateOrCountry = 'GA';
// Insert view / layout code below
const threatsView = new aeris.wxblox.views.Threats('#wxblox');
threatsView.load({
p: ${placeName}, ${stateOrCountry}
}); // 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 =
<div class="threats"><p>No Active Storm Threats for ${placeName}, ${stateOrCountry.toUpperCase()}</p></div>
;
}
});
// 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
render:after
 event handler to check if no threats were active and display a message as seen below:
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
The full-page local view may be integrated using the following example or, better yet, utilize the WeatherBlox Wizard. Remember to replace
CLIENT_ID
 and
CLIENT_KEY
 with your client id and key.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AerisWeather WeatherBlox</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.css">
<script defer src="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.js"></script>
</head>
<body>
<!--// target DOM element where WeatherBlox will be rendered //-->
<div id="wxblox" class="aeris-wrapper"></div>
<script>
window.onload = () => {
// set Aeris account access keys
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_KEY');
aeris.on('ready', () => {
// create desired WeatherBlox instance
const view = new aeris.wxblox.layouts.local.Main('#wxblox', {
obs: {
advisories: {
enabled: true
},
threats: {
enabled: true
}
},
nearby: {
request: {
limit: 4
}
},
shortterm: {
request: {
limit: 3
}
},
forecast: {
type: "detailed"
},
maps: {
animation: {
enabled: true,
autoplay: false,
alwaysShowPast: false,
alwaysShowFuture: false,
from: -7200,
to: 0,
duration: 2,
endDelay: 1,
intervals: 10
},
controls: {
layers: [{
value: "radar",
title: "Radar"
},{
value: "satellite",
title: "Satellite"
},{
value: "alerts",
title: "Advisories"
},{
value: "temperatures,clip-us-flat",
title: "Temps"
}],
regions: [{
zoom: 7,
title: "Local"
},{
zoom: 5,
title: "Regional"
}]
}
}
});
// load data and render the view for a specific location
view.load({
p: "bancroft,me"
});
});
};
</script>
</body>
</html>
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!
No comments yet.
Be the first to respond to this article.