Leaflet.Windbarbs – Basic tutorial

with No Comments

Hi there!

This is a basic tutorial for using my leaflet.windbarbs plugin. The aim of this plugin is to show the direction of the wind and the wind speed using a internationally recognized symbology.

 

Firstly, you should download the plugin from Github: https://github.com/JoranBeaufort/Leaflet.windbarb and include it in your project. Include it after including your Leaflet and possibly JQuery resources:

 

<html>  
<head>
    <title>Leaflet Windbarbs</title>
    <meta charset="utf-8" />
    <meta http-equiv="refresh" content="300" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="css/leaflet.css"/>
    <script src="js/leaflet.js"> </script>
    <script src="js/jquery-2.2.4.min.js"></script>
    <!-- This is where you can include the plugin -->
    <script src="plugins/leaflet-windbarb.js"> </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

Then you should write your Javascript to display the map and configure the windbarbs. First display the map:

// Set the bounds you want to show. Optional
 var southWest = L.latLng(47.0,7.0),
		northEast = L.latLng(47.2, 7.4),
		bounds = L.latLngBounds(southWest, northEast);
// Set up the map
        var map = L.map('map',{
            maxBounds: bounds,
            minZoom: 10,
			maxZoom: 14
        }).setView([47.083098, 7.171154], 12);
        
// Fit the map to the defined bounds (if you want to)
        map.fitBounds(bounds);
        
// Add a tilelayer to display
        L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
            attribution: 'IDW interpolation & 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);

// Define the points you would like to show as windbarbs. Here, I have an array of arrays where the inner array has 5 important fields:
// Field 1 : Lat
// Field 2 : Lng
// Field 3 : Windspeed
// Field 4 : Wind direction
// Field 5 : Active (If the station is active or not. If this is false, then the point will be shown but will have the fillcolor = grey)

// It does not matter in which order you have these fields, they just all need to be available.

        var meteoPoints = [
            [47.08753,7.20871,78,270,47,'true','Moerigen-Unterdorf'],
            [47.04954,7.09784,67,-1,47,'true','Erlach'],
            [47.11818,7.22174,32,46,90,'true','WSA-Ipsach']];

    // Here i set up the variables, this is optional
      var icon, marker;

    // Now, for each "point" in our array, I would like to generate a windbarb
        meteoPoints.forEach(function(p){
            // This is where the magic happens: This create the windbarb.
            icon = L.WindBarb.icon({deg: p[3], speed: p[2], forceDir: true, isActive: p[5]});
            // Now you use leaflet to generate a marker and then use the generated windbarb as the icon
            marker = L.marker([p[0],p[1]], {icon: icon});
            // Next you can optionally attach a permenant tooltip. This means the tooltip will always be shown (e.g. if you would like to always show the speed under the barb)
            // Important: The first argument in "bindToolTip" is set as ""+p[2] and not just p[2]. The latter results in an error
            // Options can be looked up in the official documentation.
            marker.bindTooltip(""+p[2],{permanent:true,offset:[10,20], direction: 'left',className:'tooltip-windspeed'});
            // Last but not least you add the marker to the map and if you want to, you can also add a popup
            marker.addTo(map).bindPopup("Speed: "+p[2]);
        });           
     

Finally, if you would like to have the tooltip just show with a small shadow instead of the speachbubbleesque display, add following to your CSS:

        .tooltip-windspeed{
            background:transparent;
            border:0px;
        }
        .tooltip-windspeed:before{
            display:none;
        }
        .tooltip-windspeed:after{
            display:none;
        }

Be careful to use the same classname defined in the marker.bindTooltip() definition (in my example: className:’tooltip-windspeed’)

If you ONLY want to show the text, use:

        .tooltip-windspeed{
            background:transparent;
            border:0px;
            box-shadow: none;
        }
        .tooltip-windspeed:before{
            display:none;
        }
        .tooltip-windspeed:after{
            display:none;
        }