What happened to the weather?

I recently noticed that the weather on my Magic Mirror stopped updating. After a reboot, the issue got worse: it didn’t display any weather forecasts at all. Soon, more users notified me of this issue, so it was time for some further investigation.

After opening the MagicMirror script on my Mac’s browser, and checking out the web inspector, the issue started to become clear:

XMLHttpRequest cannot load http://api.openweathermap.org/data/2.5/forecast?q=Baarn%2CNetherlands&units=metric&lang=nl. Origin http://rpi-magicmirror.local is not allowed by Access-Control-Allow-Origin.

It turns out, I was no longer allowed to make API requests to OpenWeatherMap’s API. After checking out the OpenWeatherMap’s API documention, it became quite clear why:

Our weather API is simple, clear and free. We also offer higher levels of support, please see our paid plan options. To access the API you need to sign up for an API key if you are on a free or paid plan.

Apparently, they made a change in their API policy, requiring a API key for every request. Luckily, they offer API keys even with their free accounts as well, so obtaining an API key turned out to be quite simple.

First, I created an account. (If you need an API key as well, make sure to use your own credentials here.) After pressing the creating the account button, they soon redirect you to your own dashboard, which conveniently shows your personal API key:

Now, of course we need to send this API key with every API request, so it’s time to modify the Magic Mirror code. Luckily, all the OpenWeatherMap parameters are already neatly organized in js/config.js. So adding one line of code to the config file, is all we need to do:

var weatherParams = {
    'q':'Baarn,Netherlands',
    'units':'metric',
    'lang':lang,
    'APPID':'381234525346a5f0fd84a3567f91f490' // YOUR_FREE_OPENWEATHER_API_KEY
};

And with this in place, your weather forecasts should appear again! (Although, you might of course need to refresh the page in your browser, or your Magic Mirror’s browser …)

To make things easier, I’ve added the property to the Magic Mirror’s codebase, but of course, you’ll need to add your own API key. But with the above guidelines, you’re probably able to do so …

Enjoy the weather! Even if it rains! ;)