Mess with User Interface

Use CSS to mess with the user interface of the Windy map. All the stuff is well under the #windy selector. Just make sure that the Windy logo remains unscaled, clickable, and with opacity 1.

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>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="windy"></div>
        <script src="script.js"></script>
    </body>
</html>

JavaScript


const options = {
    key: 'PsLAtXpsPTZexBwUkO7Mx5I', // REPLACE WITH YOUR KEY !!!
};

windyInit(options, () => {});

CSS


#windy #bottom,
#windy #mobile-ovr-select,
#windy #embed-zoom {
    display: none !important;
}

#windy #logo-wrapper {
    top: initial;
    bottom: 65px;
}

#windy #logo-wrapper #logo {
    left: 80px;
}