Clouds are Gathering Over Mapbox

Update: William B. Davis has now released a working demo map and blog post about his original Cloud Effect Using Turf.js and Mapbox.GL. The post includes an interactive map with animated cloud and an explanation of how the effect is created, using Mapbox's circle-blur and circle-opacity (and turf.js for the animation).

 

Darren Wiens has created a fun map which demonstrates how clouds (or smoke) can be animated on top of a Mapbox map. His Particle Playground map shows moving banks of cloud forming over Vancouver Island and drifting out over the Pacific. 

The map includes a number of controls which allow you to adjust the color of the moving cloud and the size, density and lifespan of the cloud particles. Looking beneath the hood of the map the animated cloud particles appear to be loaded on to a canvas layer on the map and then animated using turf.js. 

Although Particle Playground is fun to play with it could also be a useful visual effect to add to an interactive map. For example an animated cloud layer could be useful for a weather forecast map which wants to show the predicted cloud cover over a period of time at a specific location. 

Darren Weins was inspired to create his working demo of Particle Playground by a series of Tweets by William Davis of Mapbox in which he posted a series of GIFs of animated clouds moving on a Mapbox interactive map. One of these GIFs visualized smoke emanating from a wildfire polygon, demonstrating how animated smoke particles could be used by a wildfire map to show a forecast of the density and direction of the smoke caused by a wildfire.