August 17

How to Display Individual Tropical Cyclones

The tropical season is upon us, with the seasonal peak just a few weeks away. As tropical storms and hurricanes form, our JavaScript SDK’s tropical module is perfect for displaying their track, latest position, and forecast. The Tropical Cyclone Demo displays many of the Tropical Module’s capabilities, showing users how AerisWeather can display tropical cyclones in real time.

As we approach the seasonal peak in the Atlantic basin, there are often multiple active systems that may have overlapping tracks and five-day forecasts, such as this weekend, with Tropical Storm Fred and Tropical Storm Grace:

Example of Tropical Storm Fred and Tropical Storm Grace Crossing Paths

Example of Tropical Storm Fred and Tropical Storm Grace crossing paths

 

As seen, displaying tropical cyclones on a map can highlight overlapping storm paths, causing the visualization to lose clarity. To improve this, we will walk through adding the option to allow users to select one storm at a time via the layers panel. You can view a working CodePen example here.

Example of an Individual Tropical Cyclone

Example of an individual tropical cyclone

Fetching the Active Systems

The first step is to fetch the active systems from the AerisWeather API via the Tropical Cyclones endpoint.

Defining the Basins and Order

Next, let’s define the order of the basins to separate the active systems into and their associated names.

 

Adding the Systems to the Layers Panel

Once the interactive map has loaded, we need to invoke our function to fetch the active systems and display them within the layers panel.

 

Once loaded, if there are active systems, the layers panel will look similar to:

Example of Layer Panel with Individual Tropical Cyclones

Example of layer panel with individual tropical cyclones

Selecting an Individual System

Next, we need to add an event to capture a user selecting an individual tropical system and trigger the map to refresh and zoom into the selected typical system.

The Complete Example

Below is the complete example code. Remember to replace CLIENT_ID and CLIENT_KEY with your id and key.

 

Individual Systems with Custom Styling

recent blog discussed customizing the Tropical Cyclone styling, which we can combine with our example here. As seen in this working CodePen example, we can use icons for the forecast path with individual systems and display date/time labels along with the forecast.

Individual Tropical Cyclone with Custom Styling

Individual Tropical Cyclone with Custom Styling

Next Steps

The Javascript SDK offers many options to integrate and customize tropical cyclones with your platforms. Sign up for a free developer account and get started today. Happy coding!

 

Share this post:

Leave a Reply

Your email address will not be published. Required fields are marked *

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