Hello world

Load Leaflet library at the beginning of your script and after that Windy API library from URL https://api4.windy.com/assets/libBoot.js.

Leaflet CSS is loaded automatically.

Your application must contain <div id="windy"></div> in a place, where you want to position Windy map. Use CSS to resize or position Windy div as you wish.

In your JS code call function windyInit( options, callback ), where options object must contain mandatory API key. Other start-up values are optional, but it is highly recommended to put a much as start-up parameters as possible.

Your callback is called whenever Windy API is ready and as a parameter it receives object with Windy API.

You can use well documented Leaflet API to do anything with Windy map, or use rich ecosystem of Leaflet plugins.

Source code

        
<html>
  <head>
    <script src="https://unpkg.com/leaflet@0.7.7/dist/leaflet.js"></script>
    <script src="https://api4.windy.com/assets/libBoot.js"></script>
  	<style>
  		#windy {
  			width: 100%;
  			height: 300px;
  		}
  	</style>
  </head>
  <body>
    <div id="windy"></div>

    <script>

    const options = {

                // Required: API key
                key: 'PsLAtXpsPTZexBwUkO7Mx5I',

                // Put additional console output
                verbose: true,

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

    // Initialize Windy API
    windyInit( options, windyAPI => {
        // windyAPI is ready, and contain 'map', 'store',
        // 'picker' and other usefull stuff

        const { map } = windyAPI
        // .map is instance of Leaflet map

        L.popup()
            .setLatLng([50.4, 14.3])
            .setContent("Hello World")
            .openOn( map );

    })

    </script>

  </body>
</html>


        
Fork me on GitHub