Hello world

Windyty requires Leaflet library, version 0.7.5 or 0.7.7. Load the library at the begining of your script, for example by using this HTML code <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>

Your application must contain <div id="windyty"></div> (yes it is not typo, there is windyty) in a place, where you want to position Windyty map in your HTML code. Use CSS to position Windyty div as you wish.

In your javascript code define windytyInit object containing mandatory API key and optional start-up values and windytyMain( map ) function, that will be called after initialization of Windyty API. Your application code should be inside windytyMain( map ) function.

Load Windtyty API by placing following HTML code at the end of your page: <script async defer src="https://api.windytv.com/v2.3/boot.js"></script>

After initailizing, Windyty API introduces global object W.

You can use well documented Leaflet API to do anything with Windyty map, including enormous number of Leaflet plugins. Leaflet map will be initialized in Windyty code and instance of Leaflet map will be provided to windytyMain( map ) function as the first argument. Leaflet uses global object L,

Source code

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
    <style type="text/css">
      #windyty {    height: 500px; width: 1000px; 
                    margin-left: auto; margin-right: auto;
                    position: relative;
                    margin-top: 50px; }
    </style>
  </head>
  <body>
    <div id="windyty"></div>

    <script type="text/javascript">
          
    var windytyInit = {
          // Required: API key
          key: 'PsL-At-XpsPTZexBwUkO7Mx5I',

          // Optional: Initial state of the map
          lat: 50.4,
          lon: 14.3,
          zoom: 5,
      }  

    // Required: Windyty main function is called after 
    // initialization of API
    //
    // @map is instance of Leaflet maps
    //
    function windytyMain(map) {
      var popup = L.popup()
        .setLatLng([50.4, 14.3])
        .setContent("Hello World")
        .openOn( map );
    }

    </script>

    <script async defer src="https://api.windytv.com/v2.3/boot.js"></script> 
  </body>
</html>