Ever since Apple bought and shut down Dark Sky, I have been struggling to figure out what to replace it with. I figured that this would be a good excuse to play with some weather APIs. I have done this once before but that was with Rivets and YQL (neither of which I can necessarily recommend anymore).
OpenWeather is “a team of IT experts and data scientists that has been practising deep weather data science since 2014”. Most importantly, they have free plans, so you can play with their data rather easily.
So, let’s see what you can get when you feed in a latitude, a longitude, and an API key.
See the Pen
OpenWeather Basics – Part 1 by Joe Steinbring (@steinbring)
on CodePen.
The above API call gets you the current weather conditions for Milwaukee, Wisconsin. Next, let’s break that data up and see exactly what’s there.
See the Pen
OpenWeather Basics – Part 2 by Joe Steinbring (@steinbring)
on CodePen.
The above table should show you the name of the attribute, a description of what it is, and it’s current value (in Milwaukee, Wisconsin).
So, can we next make it a little less location dependent? Back in January, we looked at how to use navigator.geolocation and MapQuest to get somebody’s street address. Let’s use what we learned in that example to get the weather for where you actually are.
See the Pen
OpenWeather Basics – Part 3 by Joe Steinbring (@steinbring)
on CodePen.
Now that we have the weather conditions for where we currently are, we need to make the values a little more usable.
See the Pen
OpenWeather Basics – Part 4 by Joe Steinbring (@steinbring)
on CodePen.
You will notice that we are using computed properties (temperatureInFahrenheit and currentTime) above instead of data.main.temp and data.dt because the API gives you temperatures in kelvin and times as unix time values.
Note: Due to issues with browser security, you will probably need to open the 3rd example and the 4th example in new tabs.
Have a question, comment, etc? Feel free to drop a comment, below.
[ Cover photo by Jonathan Bowers on Unsplash ]