Observe what is happening inside

Major broadcasts are emitted by windyApi.broadcast. Receiving and emitting messages in Windy API has the usual syntax and methods: on, off, once, fire.

Tip: Use verbose: true as a parameter in start up options to see a nice colorful output in the browser's console.

Main broadcasts

mapChanged

After the Leaflet map has been panned or zoomed.

paramsChanged

When a user changes some parameters (overlay, level, date etc…). Do not use this event to start any intensive action since Windy must now load and render all the data. Use redrawFinished instead.

redrawFinished

Triggered when Windy has successfully loaded and rendered requested data. Use this for triggering your own tasks.

metricChanged

After some of the units (wind, temp, …) have been changed.

rqstOpen, rqstClose, closeAll

Requests to load and open or close lazy loaded plugins (see later)

pluginOpened, pluginClosed

Lazy loaded plugin was successfully loaded and opened/closed

redrawLayers

Forces various renderers to render layers, for example after reconfiguring color gradient or changing particle animation settings.

uiChanged

Whenever the User Interface has been changed. Information for other UI components to recalculate their respective sizes and adapt themselves to the new layout.

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 = {
    key: 'PsLAtXpsPTZexBwUkO7Mx5I', // REPLACE WITH YOUR KEY !!!

    // Tip: Use verbose true for nice console output
    // verbose: true
};

windyInit(options, windyAPI => {
    const { store, broadcast } = windyAPI;
    // broadcast is main Windy's event emmiter that
    // let you know what is happening inside

    // Change overlays programatically
    const overlays = ['rain', 'wind', 'temp', 'clouds'];
    let i = 0;

    setInterval(() => {
        i = i === 3 ? 0 : i + 1;
        store.set('overlay', overlays[i]);
    }, 800);

    // Observe the most important broadcasts
    broadcast.on('paramsChanged', params => {
        console.log('Params changed:', params);
    });

    broadcast.on('redrawFinished', params => {
        console.log('Map was rendered:', params);
    });
});