Displayed parameters:

Overlays: wind temp pressure clouds rh gust lclouds waves swell wwaves swellperiod sst sstanom currents

Levels: surface 975h 950h 925h 900h 850h 750h 700h 550h 450h 350h 300h 250h 200h 150h


Change of basic map parameters

Your code will communicate with Windyty libraries by either calling Windyty methods or recieving and broadcasting messages. For recieving broadcasted events use method W.on( nameOfEvent, callback ), or eventually W.once(), W.off().

To force Windyty API change parameters of a map use some of Windyty methods W.setTimestamp(), W.setOverlay(), W.setLevel(). Loading and rendering of a new weather map will take usually 0.25s - 3s, depending on network conditions. Windyty API will fire redrawFinished event as soon as the whole process of downloading and rendering will be finished.

Allowed parameters for overlays are: wind, temp, pressure, clouds, rh, gust, lclouds, waves, swell, wwaves, swellperiod, sst, sstanom, currents and for levels: 975h, 950h, 925h, 900h, 850h, 750h, 700h, 550h, 450h, 350h, 300h, 250h, 200h, 150h.

So far only wind, temp, rh overlays have higher levels.

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>

    <p>Displayed parameters:<span id="state"></span></p>
    <p>Overlays: <span id="overlays"> <a>wind</a> <a>temp</a> <a>pressure</a> <a>clouds</a> <a>rh</a> <a>gust</a> <a>lclouds</a> <a>waves</a> <a>swell</a> <a>wwaves</a> <a>swellperiod</a> <a>sst</a> <a>sstanom</a> <a>currents</a> </span></p>

    <p>Levels: <span id="levels"><a>surface</a> <a>975h</a> <a>950h</a> <a>925h</a> <a>900h</a> <a>850h</a> <a>750h</a> <a>700h</a> <a>550h</a> <a>450h</a> <a>350h</a> <a>300h</a> <a>250h</a> <a>200h</a> <a>150h</a> </span></p>
    <br />
    <script type="text/javascript">
          
      var windytyInit = {
        key: 'PsL-At-XpsPTZexBwUkO7Mx5I',
        lat: 36, lon: -102, zoom: 5,
      }  

      function windytyMain(map) {

        // html elements
        var 
        overlays = document.getElementById('overlays'),
        levels = document.getElementById('levels'),
        state = document.getElementById('state');

        // Handle change of overlay
        overlays.onclick = function(event) {
            W.setOverlay(event.target.innerHTML)
        }  

        // Handle change of level
        levels.onclick = function(event) {
            W.setLevel(event.target.innerHTML);
        }

        // Display actual state of a map
        W.on('redrawFinished',function( displayedParams ) {
          state.innerHTML = displayedParams.overlay + ', ' + displayedParams.level;
        })
      }
    </script>
    

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