August 13

Adding Custom Styles to the Tropical Cyclone Module

With Tropical Storm Fred threatening the Gulf Coast states and peak hurricane season just around the corner, now is a great time to discuss how to take your hurricane tracking to the next level by adding custom styles to the Tropical Cyclone module on the AerisWeather JavaScript SDK.

The AerisWeather JavaScript SDK has a plethora of features. The InteractiveMapApp allows you to plot weather data on an interactive map easily and comes with several built-in modules which can simplify the plotting of weather data. The Tropical Cyclone Module provides users with predefined styling and functionality for plotting various tropical cyclones endpoint-related data layers.  While these default styles may suffice for most users, we want to dive deeper and show you how to add your own custom styles to the Tropical Cyclone Module.  

The Tropical Cyclone Module consists of several modules as part of a module group. To reduce the file size of your SDK application, these modules can be lazy-loaded. This is where we will override the default styles with our own custom ones. Note that we provide a reference to the built-in utility functions in the Tropical Cyclone Module. These helper functions will make our custom styling life easier.

Styling the Tropical Systems

Overriding the default styling is quite simple. All you have to do is provide your own style config object when loading a certain module. In the example below, we are lazy-loading the Tropical Systems module and then providing said style config object.

This will implement the custom styles to plot a tropical cyclone similar to the following image:

Simple style customization of a tropical cyclone

Simple style customization of a tropical cyclone


That was easy. Now let’s take our customization further by adding date labels and storm icons along the forecast track. We will need to create a utility function that determines the icon and date labels and then pass that into our custom style config as the marker.

This will result in our image now including icons (based on the forecast intensity) and date labels at each forecast point instead of a circle.


Adding labels and custom icons to a tropical cyclone forecast track

Adding labels and custom icons to a tropical cyclone forecast track

The getStormMarkerConfig function used to customize the forecast point icons and labels can be found in the full example below.

Full Example


Next Steps

This is just the tip of the iceberg, or in this case, the hurricane icon. You can take this example and your hurricane tracking even further with the numerous other features included in the Javascript SDK and InteractiveMapApp.  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.

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