Display weather information in your site using jQuery and Yahoo services

Few months back, I wrote an article about how to retrieve weather information from www.weather.com using XOAP services. In that article I was subscribing the data from server side, caching data to SQL server database and then retrieving the information from SQL to display on the page. You can read that article from the link http://weblogs.asp.net/sreejukg/archive/2011/02/21/include-weather-information-to-your-site-using-weather-com-xmloap-service.aspx . After published the article, I received certain queries about retrieving the weather information without using any server side technology, so I decided to write this.

In this article I am going to explain how you can retrieve weather information from Yahoo services using jQuery and JSONP. Yahoo provides real time weather data for the location of your choice. Yahoo provides lot of options for developers by providing the data in various formats such as RSS, JSON, JSONP etc. To know more about weather services from Yahoo, you can refer the below link.

http://developer.yahoo.com/weather/

To retrieve weather for a particular location, you need to pass two parameters as follows.

w – WOEID, this parameter refers to the location for weather you are looking for

u – Unit of weather you would like to receive. This can be either Celsius or Fahrenheit. You can specify c or f for Celsius and Fahrenheit respectively. This parameter is optional and if you didn’t specify any the unit will be Fahrenheit.

Now you would like to retrieve the value for w parameter. I am going to explain how you can get this. Just follow the steps, it is easy. Just go to the below url

http://weather.yahoo.com/

Enter the city name or zip code for the location you are looking for. For ex. for finding weather for Manama, Bahrain, just enter Manama in the text box and press Go.

This will show all the similar locations available. Click on the location you are looking for. It will show the weather forecast for the location. In the url, you can find the value for the WOEID parameter.

The WOEID value for Manama, Bahrain is 1967057.

Now let us try getting the RSS feed for your location, try the below url, make sure you update the correct value for w parameter. http://weather.yahooapis.com/forecastrss?w=1967057&u=c

The output of the page is as follows.

The RSS response is based on RSS 2.0 specification and you can refer the http://developer.yahoo.com/weather/ for what fields included in the response.

Now you know how to get the information using Yahoo services. In order to show the weather information you need to access the data provided by Yahoo from your website. The biggest challenge here is the same origin policy of browsers, by default browser will not allow you to issue a cross domain request. There are workarounds but to achieve across browsers is always a pain. Due to the same origin policy you cannot make a cross domain request to Yahoo site. There is a workaround using JSONP and Yahoo supports this!. Using JSONP, it is possible to make cross domain requests. You can refer this here

http://en.wikipedia.org/wiki/JSONP

Yahoo offers YQL (Yahoo query language, using this you can retrieve weather compatible with JSONP. YQL allows developers to query the object similar to SQL like syntax. You can read more about YQL here.

http://developer.yahoo.com/yql/

The following is the YQL equivalent for getting temperature for Manama using JSON format.

http://query.yahooapis.com/v1/public/yql?q=select * from weather.forecast where woeid=1967057 and u='c'&format=json&callback=func

Notice the callback attribute, this is for JSONP padding. You can send the above url to jQuery method getJSON so that it will retrieve the weather data. Make sure you define callback=?, instead of specifying a name for call back, so that jQuery will define the function name for you.

I have created the below HTML page. The page is very simple and in the body I included a div with id weather. When weather is retrieved, I am going to update this div with the weather information. See my HTML markup

When I browse the page, I can see the weather in my page as follows.

Once you get the data as JSON, you can access any property available in the JSON response.

For example, if you want to retrieve Current temperature, you can use

data.query.results.channel.item.condition.temp

To retrieve date & time of the weather data you can use

data.query.results.channel.item.condition.date

To retrieve the current condition code you can refer

data.query.results.channel.item.condition.code

It is easy to customize the output as you require. I recommend you to read Yahoo usage policy to make sure you comply with the terms of use.