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)

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

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

Esri/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.

Which is determined based on zoomLevel

Here is the final result

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

Final code is at this repository

bumbeishvili/windjs-over-mapbox

And online preview can be seen here:

Wind Map

Thanks for the reading! I hope this was helpful.

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

Wind over satellite

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