Visualizing Rain and Wind on a Live Weather Map
Weather forecasting is a tale of technology, design, and engineering. In one of our earlier articles, we discussed how Meteum combines run-of-the-mill weather models with machine learning to make precise forecasts and nowcasts. Our algorithms never sleep: every single minute, we produce over 160 million forecasts for each point on the map.
Aside from the classic forecasts that showcase essential numeric values, we wanted to create an approachable global weather map that gives users a much better idea of forthcoming weather events. Plenty of live weather maps exist, but we looked to build something equally as beautiful as it is informative. For now, let’s focus on two visual aspects that took a lot of work to get right: wind movements and rain zones.
Wind Particles
Wind particles are a great way to convey wind movements. To optimize resource load, we used WebGL, a technology that empowers us to mainly run the code base on the graphics chip of the user’s device, which helps take the bulk of the load off the CPU and allows for less power consumption in general. The CPU’s power is instead funneled into passing shader arguments.
A complex in-house algorithm produces eye-pleasing particles with fading trails that you can see on the live map. Most mobile devices don’t offer great WebGL support, which is one of the challenges our engineers are currently pondering on. Until we find a solution that performs flawlessly and looks amazing on smaller screens, the wind map is available in your desktop browser. A lot goes into rendering these wind particles — enough for a standalone post.
Rain Zones
Previously, we rendered rain zones on the frontend. After a while, we started doing it on the backend, which allows for greater accuracy and reduces graphical load on the user’s device. However, it produces a more blocky look, close to how raw radar data appears when superimposed on the Earth map.
Why the squares? Simply put, weather models view the Earth’s surface as a grid where each cell represents a separate forecasting zone. In densely populated areas, more weather radars are typically present, allowing for a higher-resolution grid and higher-quality forecasting.
Even though it would be easy to massively round the corners to make the precipitation zones resemble real clouds, it would significantly hinder our hyperlocal nowcasts. That’s precisely why we moved away from a frontend solution in the first place: instead, we only round the corners slightly using our own processing powers, which minimizes accuracy loss. If you zoom in on the map, you can clearly see the square-like chunks comprising rain zones.
At times, we had to sacrifice some things for readability. If you look at a non-Meteum precipitation map, you’ll see what we mean: they tend to use many colors to reflect complex gradation of various atmospheric parameters. In our user-facing weather map, we forego these details in favor of a simple three-tier gradient to show the rain intensity. Animated raindrops, lightning bolts, and snowflakes make it clear what kind of precipitation to expect at a glance.
In future posts, we’ll discuss the design and engineering principles behind our weather map in more detail. At Meteum, we believe that every little detail matters and put a lot of care into your experience. Check out our business solutions and grab your free API key at meteum.ai/b2b and find out how your industry can benefit from a top-of-the-line weather forecasting platform powered by machine learning and crowdsourcing!
