Storms are raging across the U.S. during this very active 2018 hurricane season. Many are intensifying rapidly—Hurricane Michael grew to nearly a Category 5 from a Category 1 in just 24 hours. We’re seeing a lot of maps tracking these storms, but many are pretty technical.
With the availability of live weather data, anyone can now design their own hurricane map. We wanted to see how we could make a better visualization of storm path, intensity, and size. Follow along as we walk through how we created a streamlined but informative and vivid live storm map.
Here’s how we built it
To access the data, I’ll use the Weather Underground API which refreshes every six hours.
Creating a basemap
For a basemap I’ll use the Mapbox template Satellite Streets. The data is the main focus, so the basemap should be pretty schematic: state and administrative borders and some labels are enough for a user to orientate on the map.
Next, I want to clean up the style and delete unnecessary layers — roads, tunnels, bridges and highway shields. I’ll use the Mapbox Studio settings to make it black and white: saturation, contrast, brightness, hue rotate — just like Instagram filters. Then I’ll add a mask via background layer with opacity.
To make the water visually distinguishable, I’ll make it a vector layer and add a diagonal pattern. Finally, to help a user navigate the map, I’ll add water labels and adjusted the labels of the countries, cities, and places. The end result:
Preparing the data
To show the hurricanes trajectory on the map I’ll need a cone of uncertaintywhich shows a prediction of how the hurricane will move. We have the points of predicted hurricane locations in 12, 24, 36, 48 hours and in 4 and 5 days.
Each point has parameters: the one I’ll use is error radius, which is measured in degrees of latitude. To create a cone, I’ll need polygons showing the error radius in a point, and the direction of the forecast.
We’ll use a cheap-ruler library to convert the error radius to kilometers and build round polygons with Turf library:
To connect the round polygons, we need two points, the current one and the last one, to calculate the angle between them by building lines with a length of the error radius:
Finally we are getting the cone by merging in the round polygons we’ve created.
const forecastPolygon = turf.union(…polygons);
Styling the data
We know the following: where the hurricane was, the wind speed in the eye of a storm in a number of directions, and the radius of maximum wind.
Let’s adjust the hurricane colors depending on wind speed:
The next step is adjusting the radius of the circles to reflect the size of the maximum wind radius, regardless of it’s direction from the reference point. We are using expressions to tune the radiuses by zoom levels. Let’s also add text labels of the hurricane’s strength/category at each step:
Now we style the prediction points, trajectory line, and the cone:
Finally we have a beautiful, informative, self-updating view of past, current and predicted hurricane activity. Explore the interactive map here.