WindyTv Display - POSOCO/wind-forecast GitHub Wiki

https://api.windytv.com/examples/timeline/

<!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: 17.0760, lon: 76.8777, 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>
⚠️ **GitHub.com Fallback** ⚠️