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
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
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
Display wind map over the live map. Contribute to bumbeishvili/windjs-over-mapbox development by creating an account on…
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
Update 2: I added temperature overlay and now it looks gorgeous