Wind Barbs in Leaflet – Leaflet.windbarb

with 7 Comments

As a windsurfer and sailor, I am particularly interested in good spatial visualisations concerning wind including wind speeds and the wind direction. Wind barbs were invented to be the standard of visualising wind, but to my disappointment, leaflet offered no plugin to create wind barbs. I could have just loaded individual images as markers, but I wanted a flexible solution and so I created a Leaflet plugin which takes the Lat/Long of a point, along with wind speed and wind direction and generates the appropriate wind barb icon. For reasons of convenience I made only the center circle clickable and I also included several options to style the wind barbs and last but not least, seeing that the plugin generates icons which are used in Leaflet markers, popups can easily be bound to the markers.

The current progress and the plugin can be seen and downloaded on github:

Leaflet.windbarb

Improvements, comments or questions are welcome 🙂

Example:

Code of Examples

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css"/>
    <style>
        #map {
            height: 500px;
        }
    </style>

    <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"> </script>
    <script src="Leaflet.windbarb/src/leaflet-windbarb.js"> </script>
    
    <h4>Example:</h4>
    <div id="map"></div>

    <script>
    
    var southWest = L.latLng(47.024354,7.069445),
		northEast = L.latLng(47.146849, 7.249689),
		bounds = L.latLngBounds(southWest, northEast);

        var map = L.map('map',{
            maxBounds: bounds,
            minZoom: 12,
			maxZoom: 14
        }).setView([47.083098, 7.171154], 12);
        
        map.fitBounds(bounds);
        
        L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
            attribution: 'Wind barbs by <a href="http://www.geonet.ch">GeoNET</a> &mdash; Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            subdomains: 'abcd',
            ext: 'png'
        }).addTo(map);
        
        var meteoPoints = [
            [ 47.11285 , 7.222309, 5, 190], //Ipsach
            [ 47.085272, 7.20377 , 30, 90], //Mörigen
            [ 47.092285, 7.156734, 47, 170], //Twann
            [ 47.13294 , 7.220936, 92, 45], //Vingelz
            [ 47.088311, 7.128925, 125 , 280], //Twannberg
            [ 47.124765, 7.234669, 200, 135], //Nidau
            [ 47.055107, 7.07159 , 62 , 360 ]  //lelanderon
        ];
                
        meteoPoints.forEach(function(p){
            var icon = L.WindBarb.icon({deg: p[3], speed: p[2]});
            var marker = L.marker([p[0],p[1]], {icon: icon}).addTo(map).bindPopup("<p>Wind Speed: "+p[2]+"</p>"+
                                                                                  "<p>Wind Direction: "+p[3]+"</p>");            
        });
  

    </script>

7 Responses

  1. Romain
    |

    Very nice, thanks for sharing!
    Also, it’s important to use the same version of Leaflet that the one used in the example (v1.0.0-beta.2) because the circle mark won’t be drawn at the correct place with the current Leaflet version js (0.7.7).
    Thanks again!

  2. JoranBeaufort
    |

    Hi Romain. Thanks for your comment, I have now added a little requirements section on GitHub saying that v1.0.0beta2 or above is needed for this to work. Thanks for noticing this! Cheers

  3. Candido Bugarin
    |

    Hey Joran!
    Congratulations for your job. I’m meteorologist and developer from Brasil and loved your job. Now, I try to add a vector icon using the same logic with you and have a problem to plot a SVG. Can you help?
    Thanks

    • JoranBeaufort
      |

      Hi Candido Bugarin

      Thank you for the nice feedback 🙂 What are you trying to do? What seems to be the problem? So you are trying to make a completely new plugin? Or do you have problems using the leaflet.windbarbs plugin?

      Cheers

      • Candido Bugarin
        |

        Hello. My idea is add the possibility for the user display the wind by vector, in your plugin if you agree. I use the same logic with you in your plugin, but when my function returned the svg the Leaflet dont display in map.
        And dont have error with leaflet.windbarbs, Dont worry. If you can, i going to send a mail with my code for you and you can see.
        What do you think?

        Thanks and congratulations

  4. Víctor Velarde
    |

    Hi Joran,

    Thanks for your work!. It is very interesting.
    I’m right now developing a Leaflet plugin for vector field animations (wind, currents…), that may be useful for you: https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/example_VectorFieldAnim.html

    Regards

    • JoranBeaufort
      |

      Hi Victor
      Sorry for the late reply! Thanks for your kind words! Your plugin looks awesome! I will definitely have a more detailed look into it as soon as I find the time. The plugin looks great for displaying real-time wind situations or forecasts! Maybe it would be possible to auto generate a vector field using interpolation of ground stations and visualise the whole pseudo-wind-currents with your plugin. Maybe even colour the vector field according to wind speed. Thanks for the hint and your plugin! 🙂