Using Widgets to Create a Severe Weather Alert

04 Mar, 2021

Tornadoes, hurricanes, typhoons, heavy rains, severe thunderstorms, and other catastrophic weather events often occur without warning. Without adequate weather information, it’s difficult to prepare, respond, and mitigate the impact of dangerous weather events.

Historically, the public relied on broadcast media or the national weather radio to deliver severe weather information. Fast forward to today, there are tons of weather providers that inform users when threatening weather conditions develop.

These weather services, usually in the form of easy-to-consume APIs, give access to a wide range of forecast data and allow you to activate emergency alerts on the go in the form of text or mobile notifications for a specific location.

In this article, you will learn how to create severe weather alerts using widgets powered by an API. So, let’s get started.

Obtain Your API Key

The first step when creating alerts is registering for a weather service and obtaining the API key from your chosen provider. In this case, we’ll be using the free weather API by ClimaCell.

You will need to sign up on the ClimaCell website and use the free API offering, but you can upgrade to a higher tier to unlock more functionality.

Upon successful registration, you can obtain your key on the ClimaCell dashboard. You should have a view like this:­

Go to ClimaCell Widgets

The ClimaCell widgets section allows you to create custom widgets for a target location. These are easy to use since it only takes a couple of minutes to customize a widget and embed it into your app or website. Once done, users can get real-time weather data and forecast information needed to make critical decisions.

But before creating a widget, you need to understand the types of widgets supported. ClimaCell allows you to create three types of widgets, namely: nowcast, hourly and daily outlook.

• Nowcast widgets ****- These widgets provide minute-by-minute weather forecasts for up to six hours in a location of your choice. This widget also provides severe weather alerts for all locations across the U.S.

• Hourly widgets ****-The hourly outlook provides 24-hour weather forecasts for a location of your choice, including severe weather alerts.

• Daily widgets ****-The daily outlook gives you insight into daily weather conditions for the next seven days. These one-week forecasts are also backed with severe weather alerts.

All three types of widgets are essential if you wish to keep an eye on severe weather conditions. Keep in mind that you’ll be required to input your API key before customizing any of these widgets.

Customize Weather Forecast Settings for the Target Location

This step is pretty straightforward. You start by clicking on the type of widget you’d like to create. Let’s start with the nowcast outlook as an example. After hitting the “Create my widget” button, ClimaCell prompts you to enter your API key for authentication before calling the API.

Once done, you will be required to enter the target location. In this case, there’s no need to know the geo-coordinates. Instead, just type the target location or city in the address field, and a drop-down will appear for you to select the location.

Let’s use New Orleans as an example. Next, enter the parameters for weather conditions you’d like to monitor and the preferred units.

Here is an example nowcast widget that monitors precipitation, humidity, temperature, visibility, and wind in New Orleans, USA.

There’s not much of a difference between creating an hourly or daily outlook widget. Simply follow the same steps but take care of the weather parameters.

Customize the Look of Your Widget

Now that you can successfully fetch weather data, it’s time to apply a better look and feel to your widget. This functionality is beneficial if you need to give your widget a look that blends with your website or application theme.

ClimaCell allows you to edit the size, font, color, and background in just a few clicks. As you customize your widget's look, ClimaCell provides a preview of your edits on the left side of your screen.

Here’s an example hourly widget for New Orleans with a custom design.

Embed the Widget on Your App or Website

At this point, you can embed the widget on your website. To do this, you only need to hit the copy code button to get the code snippet for your custom widget, as shown below.

After obtaining the code snippet, paste the <script> before the closing </body> tag of your web page. The <div> element should also be injected where you want your widget to appear. For our hourly forecast widget above, the markup looks like this:

Source

Once done, refresh your web page to check how the widget displays.

Add Custom Alerts Triggered Under Specified Forecast Conditions

ClimaCell widgets provide forecast data and severe weather alerts by default. However, you can also create custom alerts and warning messages for risky weather situations in your location. For instance, if you live in a hurricane-prone area and would like to add your own alerts other than those provided by the widgets, here’s what you should do.

At first, you’d need to create a widget and deploy your code on GitHub or any other environment. Next, you must understand the conditions that precede a hurricane warning. According to the National Weather Service, a hurricane is set to occur when an area experiences sustained winds with a speed of 74 mph or higher.

However, because it is difficult to prepare for hurricanes once winds exceed 39mph, a hurricane warning should be set 36 hours before a tropical storm force hits the area. This means if you’re using widgets to track weather conditions, you must use both hourly and daily outlook widgets to deliver timely alerts.

To trigger custom alerts, you can call the alerts endpoint. Here, you must specify the parameters required and set the alert when conditions are met. Below is an example request that you can edit by adding alerts, location ID, logical expressions defining a weather event, and the warning messages.

Source%253B%250A%250Aconst%2520options%2520%253D%2520%257B%250A%2520%2520method%253A%2520%27POST%27%252C%250A%2520%2520url%253A%2520%27https%253A%252F%252Fapi.climacell.co%252Fv3%252Falerts%27%252C%250A%2520%2520qs%253A%2520%257Bapikey%253A%2520%279efRx8KrGKa6ME0ORWIJz7TaNjuRQAvb%27%257D%252C%250A%2520%2520headers%253A%2520%257B%27content-type%27%253A%2520%27application%252Fjson%27%257D%250A%257D%253B%250A%250Arequest(options%252C%2520function%2520(error%252C%2520response%252C%2520body)%2520%257B%250A%2520%2520if%2520(error)%2520throw%2520new%2520Error(error)%253B%250A%250A%2520%2520console.log(body)%253B%250A%257D)%253B)

Conclusion

When unprecedented weather events occur, it is vital to stay updated about severe weather conditions. With API-powered widgets, you can receive geo-specific emergency alerts on the go to help you stay safe.

Note: In this post, we only revealed our API key when creating the widget for the purpose of demonstration. Even if you’re creating a custom widget from scratch, you should never expose it on the client-side. The best way to safeguard your API keys storing them in a server that works as a proxy to the ClimaCell API.

#API #weather #widgets