Displayed parameters:



Change time of forecast

Use W.setTimestamp( timestamp ) method, with timestamp as a parameter, to change time of the forecast. Forecast have usually 3h steps, but do not worry, Windyty takes care of everything and finds nearest valid forecast time. Timestamp must be in range of maximum ( W.timeline.end ) , and minimum ( W.timeline.start ) allowed values. Some of overlays can have different length of forecast, so check maximum and minimum value anytime, when you change overlay.

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>   
    <input type="range" id="range" min="0" max="10" style="width:100%;">
    <br /><br />
    <script type="text/javascript">
          
      var windytyInit = {
        key: 'PsL-At-XpsPTZexBwUkO7Mx5I',
        lat: 36, lon: -102, zoom: 5,
      }  

      function windytyMain(map) {

        var 
        range = document.getElementById('range'),
        state = document.getElementById('state');

        // Set minimum and maximum timestamp value
        // for current overlay. Do not forget to check
        // time boundaries after changing overlay.
        range.max = W.timeline.end;
        range.min = W.timeline.start;

        // Handle change of <input range>
        range.onchange = function(event) {
            W.setTimestamp(+event.target.value) 
        }  

        // Display actual state of a map
        W.on('redrawFinished',function( displayedParams ) {
          state.innerHTML = new Date( displayedParams.timestamp ).toString();           
        })
      }
    </script>
    

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