Displaying wind map over a live map

In the past few weeks, I was trying to implement a wind map over mapbox.

I found several eye-catchy examples but turned out it was surprisingly hard to find a fully working version.

I liked WebGL-wind most

(https://github.com/mapbox/webgl-wind)

Image for post
Image for post

Though, I was unable to integrate it with a live map, mostly due to my limited WebGL knowledge.

Then I looked for alternatives, and I came across with https://github.com/astrosat/windgl

But, it did not have the same features, as WebGL-wind had

Image for post
Image for post

So, finally, I found Esri’s wind.js

It is based on simple Html5 canvas, which arises some performance concerns (since above two was based on WebGL),

But, by tweaking with few parameters, we can achieve close enough results with it.

PARTICLE_REDUCTION = 0.5;  // Decrease particle counts to 50%FRAME_RATE = 60 ;          // Increase frame rate to 60

Also, I’ve added a variable line width, so after zooming, particles maintain relative width.

Image for post
Image for post

Which is determined based on zoomLevel

Image for post
Image for post

Here is the final result

Image for post
Image for post

FPS is near 60 (at least on my MacBook air)

Image for post
Image for post

Final code is at this repository

And online preview can be seen here:

Thanks for the reading! I hope this was helpful.

Update: I used satellite overlay instead of a dark one, looks even better

Image for post
Image for post
Wind over satellite

Update 2: I added temperature overlay and now it looks gorgeous

Image for post
Image for post

Data Visualization Engineer — https://davidb.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store