🌤️ Add a Simple Weather Widget to Your Nav Bar (Local Forums)

treyb

I recently added a clean little weather widget to my Flarum forum's header and wanted to share how you can do the same! It displays your local weather icon and current temperature, matches your site’s theme colors, and is responsive (hidden on mobile).

🎨 Step 1: Get Your Weather Icons

There’s a great free set of weather icons available here:
👉 Open Weather SVG Icons by isneezy

✅ Download these and upload them to your server.
For example:

https://yourdomain.com/weather/images/01d.svg
https://yourdomain.com/weather/images/02n.svg
... and so on.

These filenames match the codes from the OpenWeatherMap API (more on that below).

🔑 Step 2: Sign Up for a Free OpenWeatherMap API Key

Go to https://openweathermap.org/api
Create a free account and generate your API key.
Copy your API key — you’ll use this in your script.

🌎 Step 3: Find Your City ID

OpenWeather uses City IDs for accuracy (especially when cities share names).

To find your City ID:

Search for your city here:
👉 City List JSON Download

Or simply test in your browser:

  https://api.openweathermap.org/data/2.5/weather?q=YourCityName&appid=YOUR_API_KEY

The JSON response will include "id": YOUR_CITY_ID.

Example:
Marietta, GA has City ID: 4207783

🗂️ Step 4: Prepare Your Files

You'll need two files hosted on your site:

weather-widget.js (your JavaScript logic)
weather-widget.css (your styling)

🟢 Sample `weather-widget.js`:

if (!window.weatherWidgetLoaded) {
    window.weatherWidgetLoaded = true;

    document.addEventListener('DOMContentLoaded', function() {
        const apiKey = 'YOUR_OPENWEATHER_API_KEY';                    // Replace with your OpenWeather API key
        const cityId = 'YOUR_CITY_ID';                                // Replace with your city's ID (example: Marietta, GA = 4207783)
        const iconPath = 'https://yourdomain.com/weather/images/';    // Folder where your weather icons and placeholder.svg are stored
        const placeholderIcon = `${iconPath}placeholder.svg`;
        const apiURL = `https://api.openweathermap.org/data/2.5/weather?id=${cityId}&units=imperial&appid=${apiKey}`;

        fetch(apiURL)
            .then(response => {
                if (!response.ok) throw new Error('Weather API error');
                return response.json();
            })
            .then(data => {
                const iconCode = data.weather[0].icon;
                const iconUrl = `${iconPath}${iconCode}.svg`;
                const temperature = Math.round(data.main.temp);

                const widget = document.getElementById('weather-icon-widget');
                widget.innerHTML = `
                    <div class="weather-nav-widget">
                        <img class="weather-icon" src="${placeholderIcon}" alt="Loading Weather Icon">
                        <span>${temperature}&deg;</span>
                    </div>
                `;

                const preloadIcon = new Image();
                preloadIcon.src = iconUrl;
                preloadIcon.alt = "Weather Icon";
                preloadIcon.onload = () => {
                    const imgElement = widget.querySelector('.weather-icon');
                    if (imgElement) {
                        imgElement.src = iconUrl;
                    }
                };

                const searchContainer = document.querySelector('.Search');
                if (searchContainer) {
                    searchContainer.style.display = 'flex';
                    searchContainer.style.alignItems = 'center';
                    searchContainer.appendChild(widget);
                }
            })
            .catch(error => {
                console.error('Weather Widget Error:', error);
            });
    });
}

🎨 Sample `weather-widget.css`:

.weather-nav-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    color: var(--primary-color);
    font-weight: 600;
    line-height: 1;
    margin-left: 12px;
}

.weather-nav-widget img {
    width: 34px;
    height: 34px;
    display: block;
    background-color: var(--button-bg);
    border-radius: 50%;
    padding: 1px;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    #weather-icon-widget {
        display: none !important;
    }
}

🔧 Step 5: Add This to Your Flarum Custom Header:

<div id="weather-icon-widget" style="display: flex; align-items: center; margin-left: 10px;"></div>
<link rel="stylesheet" href="https://yourdomain.com/weather/weather-widget.css">
<script src="https://yourdomain.com/weather/weather-widget.js"></script>

✅ Result:

Fully responsive (hides on mobile).
Matches your site theme colors.
Clean SVG icon + temperature, injected right into your nav bar.

💡 Bonus Tips:

You can easily adjust the breakpoint where it hides (change 1100px to whatever fits your theme).
Tooltip text (title="Current Weather") can be customized to say your city, like “Marietta Current Weather.”

Update

Added a placeholder SVG as suggested by @Subarist . Please create the below svg file.
Title: placeholder.svg


<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="20" stroke="rgba(0, 0, 0, 0.3)" stroke-width="5" fill="none"/>
  <circle cx="25" cy="25" r="20" stroke="var(--primary-color)" stroke-width="5" fill="none"
    stroke-linecap="round" stroke-dasharray="90,150"
    transform="rotate(-90 25 25)">
    <animateTransform attributeName="transform" type="rotate"
      from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite"/>
  </circle>
</svg>

If you use this on your forum, I’d love to see how it turns out! 🎉

Examples:

Light Mode

Dark Mode

huseyinfiliz

treyb The improvements you've shared for Flarum are incredibly useful and beautifully designed—great work! Honestly, you already have everything needed to turn this into a full-fledged extension. I haven't gone through all the code yet, but if requests are being sent on every page reload, integrating a caching system could be a nice performance boost. Thanks again for your valuable contribution!

treyb

huseyinfiliz thank you for the kind words.

On the extension though, honestly I tried creating an extension and it was just one error after another. It may be due to my computer’s age or most likely due to user error. At any rate, I had to give up and just work the one way I know how too!

Subarist

I will consider using a placeholder, and replace it with the actual weather icon once it has finished loading. This may help reduce layout shifting.

neercsys

Nice 👍
Can you make the location be the visitor's current location?

treyb

Subarist I have updated to cover that!

treyb

neercsys I may look into that, I just like to stray away from the pop up asking people to share their locations. For my use case, the forum is hyper local.

neercsys

treyb ChatGPT helped me figure it out 😊

if (!window.weatherWidgetLoaded) {
    window.weatherWidgetLoaded = true;

    document.addEventListener('DOMContentLoaded', function() {
        const apiKey = ''; // Your API key
        const iconPath = 'https://www.yourflarum.com/weather/images/';

        async function loadWeather() {
            try {
                // 1. First, let's get the user's location.
                const locationResponse = await fetch('https://ipapi.co/json/');
                const locationData = await locationResponse.json();
                const latitude = locationData.latitude;
                const longitude = locationData.longitude;

                // 2. We use lat/lon to get the time
                const apiURL = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${apiKey}`;

                const weatherResponse = await fetch(apiURL);
                if (!weatherResponse.ok) throw new Error('Network response was not ok');
                const data = await weatherResponse.json();

                const iconCode = data.weather[0].icon;
                const iconUrl = `${iconPath}${iconCode}.svg`;
                const temperature = Math.round(data.main.temp);

                // 3. Find the widget and insert data
                const widget = document.getElementById('weather-icon-widget');
                widget.innerHTML = `
                    <div class="weather-nav-widget">
                        <div class="weather-icon-background" title="Current weather in ${locationData.city}">
                            <img src="${iconUrl}" alt="Weather Icon">
                        </div>
                        <span>${temperature}&deg;</span>
                    </div>
                `;

                const searchContainer = document.querySelector('.Search');
                if (searchContainer) {
                    searchContainer.style.display = 'flex';
                    searchContainer.style.alignItems = 'center';
                    searchContainer.appendChild(widget);
                }

            } catch (error) {
                console.error('Weather API error:', error);
            }
        }

        loadWeather(); // Call function
    });
}

ipapi.co allows you up to 1000 requests per day for free.

treyb

neercsys awesome, thanks for sharing!