Hello world

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

The Leaflet CSS is loaded automatically.

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

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

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

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

Source code

Download complete example from GitHub

HTML


<html>
    <head>
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
        />
        <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
        <script src="https://api.windy.com/assets/map-forecast/libBoot.js"></script>
        <style>
            #windy {
                width: 100%;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div id="windy"></div>
        <script src="script.js"></script>
    </body>
</html>

JavaScript


const options = {
    // Required: API key
    key: 'PsLAtXpsPTZexBwUkO7Mx5I', // REPLACE WITH YOUR KEY !!!

    // 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);
});