« Youtube video in AS3 FLVPlayback
Youtube video in AS3 FLVPlayback Update(2) »

AS3 Google Weather API lib – Updated

A while ago, I needed to integrate a weather forecast into an actionscript application I was developing.

After some initial searching, I quickly stumbled upon the yahoo weather API.
I dug into this some more and even found an AS3 library for getting the weather forecast! But then, the dissapointment came. When implementing this, you could only get a basic forecast for the current date, with a link to go to the full weather forecast. As demonstrated here.

After some more searching for the right API to suit our needs (a very basic one), I found the google weather API.
The use of the API is as follows:
1) you send a http request like the following : http://www.google.com/ig/api?weather=Paris,France&hl=fr to the API
2) you receive an XML response containing weather forecast data for the next 4 days for a given location
So actually you could say it is more like a feed than an API.

But this seemed to be exactly what I needed to get the job done.
The main problem I ran into was that the API was not officially documented, so I had to do some scraping (monitoring requests and responses with charles) to find out how it worked. And of course putting the pieces together reading several blogs / forums etc.
More unofficial documentation can be found here
Also, I never found a proper actionscript library that enables us to retreive this data. That’s why I decided to stop wasting precious time and just make it myself.

Basically all I did was create a wrapper library that does the request, gets the response and handles errors in an easy to use manner.
This resulted in a fully functional AS3 library for use in flash or flex to retreive weather forecast data from google weather.

Note: When loading the xml and images from an external source, make sure to use a proxy in order to avoid flash player security issues.
In some cases, you also need to put a crossdomain.xml on your server in order to enable your swf to acces external content.

I tried to put comments in the example as much as I could to make everything as clear as possible.
Feel free to use this library in your projects / play around with it.
If you have any remarks, additions, request, questions… just post them here.

This is the basic result, just displaying the data received from the api. Nothing less, nothing more:

UPDATE

Google made changes to the API, causing the standard images not to show anymore.
A minor fix in the GoogleWeatherService.as class solved the issue.

Changed

1

public static const BASE_IMAGE_URL:String = "http://www.google.com/ig";

to

1

public static const BASE_IMAGE_URL:String = "http://www.google.com";

View the new example here
Or download the SWC and source files with the above usage example here: AS3 Google Weather lib (1160)

Tags: , , , ,

This entry was posted on Tuesday, April 28th, 2009 at 12:00 pm and is filed under Actionscript 3, Util. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  1. #1 by David C on March 12th, 2009 - 8:58 pm

    This is wonderful! Great job!!!
    I got the same impression as you on the Yahoo Weather API, and I was thinking of coding something this myself. Thanks for sharing!

    RE Q

  2. #2 by Steven Rieger on March 31st, 2009 - 5:25 pm

    Hi Dennis,
    I love the code and am trying to use it.

    Unfortunately I do not have the ability to run a php script. Is there any way around the proxy issue?

    RE Q

  3. #3 by Dennis on April 1st, 2009 - 9:06 am

    @Steven Rieger
    Steven, unfortunately not…

    This is because google doesn’t have a crossdomain.xml on their server. This is a problem because flash will throw sandbox violations because you are trying to access content on another domain (server) that is not marked as content that can be incorporated into your application. In this case the actual xml feed and the images for the weather conditions.

    Of course, there are other options like a java proxy or an ASP.net proxy. But until google puts a crossdomain.xml on the server a proxy will be needed to avoid these sandbox violations :(
    And I don’t think this will happen any time soon because the API is unofficial and there is no real community built around it.

    RE Q

  4. #4 by mark on April 15th, 2009 - 4:00 pm

    thanks !! very helpful post!

    RE Q

  5. #5 by mark on April 16th, 2009 - 10:06 am

    I rarely comment on blogs but yours I had to stop and say Great Blog!!

    RE Q

  6. #6 by dennis on April 28th, 2009 - 4:25 pm

    not working :(

    RE Q

  7. #7 by dennis on April 28th, 2009 - 4:26 pm

    @dennis
    no its working but if i enter germany as country i only get an error… works fine if i leave it blank

    RE Q

    • #8 by Dennis on April 28th, 2009 - 4:36 pm

      Hi,

      Do you mean an error in the example on this blog, or in your own written code?

      I tried “germany” and it works fine here.. Only the currenct condition icon is not shown.
      Sometimes there is no image available for the conditions @ the google side, the result is an empty image.

      Would like to help you but then I need some more info :)

      Grtz

      RE Q

  8. #9 by dennis on April 29th, 2009 - 12:05 pm

    ah my fault… the sun was shining on my display so i didnt see that i accidentally switched country and city :D

    so… everything works fine! ;)

    RE Q

  9. #10 by Riestra on May 5th, 2009 - 8:49 am

    Hi,
    I have tried to change the country code but it doesn’t change anything. I had tried with portugese, italian and spanish
    + country.text + “&hl=pt”;
    + country.text + “&hl=it”;
    + country.text + “&hl=es”;

    But only works if I introduce the name of citys and countries in English. I have tried with Alemanha and Alemania that is Deutschland in Portuguese and Spanish but it throws an error. Seems like it only works with city and country names in English…
    Any idea?
    Thanks.

    RE Q

    • #11 by Dennis on May 5th, 2009 - 8:57 am

      Hi,

      The &hl=[lang] parameter only changes the format of the units (degrees Celcius / Fahrenheit, kmh / mph).
      This has nothing to do with the language you type in..
      This has to be English indeed.

      However, you could translate your input from Portugese to English automatically by using the Google translation API.
      http://code.google.com/apis/ajaxlanguage/
      A colleague of mine at boulevart has done exactly this for translating Dutch to English and it worked like a charm.

      Regards

      RE Q

  10. #12 by Riestra on May 5th, 2009 - 6:28 pm

    Hi Dennis,
    what I need is to translate the outputs like the days of the week and other ,from English to other languages.
    Is it possible to do this with the translation API?

    I’ve tested your program but I don’t know how to convert to a component in order to work with a project that I’ve developed.
    Have you done this? Do you have a component version or similar?

    Regards.

    RE Q

    • #13 by Dennis on May 6th, 2009 - 8:54 am

      Riestra,

      1) Check http://translate.google.com/ and try to translate the things you would like to, to see if it can be done.
      But I really don’t think this should be a problem. Days of the week and units are basic semantics of almost any language. The clever folks at google know this and will most likely have put these basic language terms into their translation engine.

      2) I have made a .swc component for the google weather API. You can find it in the zip file attached to this post.
      Just download the zip, unpack and find the .swc in the bin folder.

      Regards

      RE Q

  11. #14 by Riestra on May 6th, 2009 - 5:00 pm

    Hi Dennis,
    the .swc is the API or the library to use Google Weather.
    I mean a component in terms of Flex Components. An .mxml that works like a component, easy to integrate in a Flex project like you did in your GoogleWeather project with:

    —–
    I ask this about not to have to readapt your project to integrate in my project. If you have done a component version for Flex it would be very easy to integrate.

    Regards.

    RE Q

  12. #15 by Dennis on May 6th, 2009 - 5:04 pm

    @Riestra

    Riestra,

    The swc is the AS3 wrapper library to use google weather.

    But you can also view the example and take a look at the code.
    Or download the zip… the example mxml is included.

    However I did not make an mxml component out of this, feel free to do so yourself

    Regards

    RE Q

  13. #16 by dennis on May 13th, 2009 - 12:31 pm

    hey, i have a problem.. i need the weather data in °C but its not working with your php script. i took the proxy.php u provided in ur article and uploaded it onto my server and altered the Settings.as. But i still get it in Fahrenheit. If I run it local without the Proxy I get °C… don’t know what i did wrong… any suggestions??

    regards dennis :)

    RE Q

  14. #17 by Dennis on May 13th, 2009 - 12:55 pm

    @dennis

    Hi,

    The problem you are describing can be solved as follows..

    The standard language (and units) of the weather API is US english and thus retreives US units.

    You need to change the &hl parameter of the urlrequest.

    The querystring you send to the weather service wrapper class should look something as follows:

    http://www.google.com/ig/api?weather=paris,france&hl=fr

    in the code:

    1
2
3

    //we need to use a proxy in order to avoid flash player security issues
                var url:String = Settings.PROXY_URL + GoogleWeatherService.BASE_QUERY_URL + "weather=" + city.text + "," + country.text + "&hl=fr";
                service.getWeather(url); //get the weather from the service

    Hope this helps

    Regards

    RE Q

  15. #18 by dennis on May 14th, 2009 - 4:30 pm

    oh sorry i forgot to mention that i already did this… that is why it works if i do it local WITHOUT proxy

    thx for all your efforts :)

    RE Q

  16. #19 by Dennis on May 18th, 2009 - 10:23 am

    @dennis
    Hi dennis,

    I tested the behavior you mentioned here.
    And you are correct.

    The fault lies in the proxy that doesn’t accept a url with parameters.

    e.g
    When calling the following url by the proxy
    http://www.dennisjaamann.com/demo/proxy.php?url=http://www.google.com/ig/api?weather=paris,france&hl=fr,

    The proxy only retreives
    http://www.dennisjaamann.com/demo/proxy.php?url=http://www.google.com/ig/api?weather=paris,france

    I will look into this issue and try to come up with a solution so that the proxy accepts multiple parameters.

    Regards

    RE Q

  17. #20 by mark on June 9th, 2009 - 5:02 pm

    did u find a solution for this problem?

    RE Q

    • #21 by Dennis on June 10th, 2009 - 9:09 am

      Yes,

      I found a rather simple solution.
      The problem was that the proxy did not accept multiple parameters,
      So I simply modified it to accept multiple params.

      As I am currently very busy @ Boulevart, I did not have the opportunity to update the example yet.
      However, this is the code for the new proxy.

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

      <?php
$ch = curl_init();
$timeout = 30;
$userAgent = $_SERVER['HTTP_USER_AGENT'];
 
$url = $_REQUEST['url'];
$hl = $_REQUEST['hl'];
 
$fullGoogleWeatherPath = $url . "&hl=" . $hl;
 
curl_setopt($ch, CURLOPT_URL,$fullGoogleWeatherPath);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
curl_setopt($ch, CURLOPT_USERAGENT, $userAgent);
 
$response = curl_exec($ch);     
 
if (curl_errno($ch)) {
    echo curl_error($ch);
} else {
    curl_close($ch);
    echo $response;
}
?>

      When I have some time on my hands, I will update this example.

      Regards

      RE Q

  18. #22 by mark on June 10th, 2009 - 11:50 am

    sweet thx!! :)
    awesome example btw :)

    RE Q

  19. #23 by Bret Lanius on June 24th, 2009 - 2:41 pm

    I’d like to use this class but have two issues.
    I’m on windows and the zip file has those pesky extra MAC files that make it nearly impossible to extract the files, could you re-zip in compatible format?

    I cannot use SWC as I’m working in Koolmoves which supports AS3 but not SWC, I see that there is a src folder can I just use that?

    RE Q

    • #24 by Dennis on June 24th, 2009 - 2:52 pm

      Hi Bret,

      1) why would you not be able to unzip a .zip file on windows using any standard .zip extractor?

      2) yes the source is included in the zip file, it is in the source folder.

      Regards

      RE Q

  20. #25 by Bret Lanius on June 24th, 2009 - 3:31 pm

    1) the hidden MAC folders act like duplicated files and dosen’t work.

    Info here:http://www.richardcravy.com/?p=272

    I probably can manually extract individual files one at a time but’s a real pain and time consuming.

    RE Q

  21. #26 by Xavier on November 30th, 2009 - 1:59 pm

    Hello,
    first of all, thanks a lot for sharing your work.
    It’s exactly what I needed.

    I also want to use the “&hl=fr” option but it does not work.
    I understood I had to use a proxy file with the php code you gave but I don’t know how to do this…
    Should I simply put the proxy.php file on my website (for example http://mydomain.com/proxy.php) and modify the settings.as to use “http://mydomain.com/proxy.php?url=” as proxy_url?

    Thanks for your answer!

    RE Q

  22. #27 by Dennis on November 30th, 2009 - 2:17 pm

    @Xavier
    Hi Xavier,

    That is exactly what you need to do to get it working.

    RE Q

  23. #28 by Xavier on November 30th, 2009 - 4:23 pm

    Great, I’ll test it ASAP.
    Do we need to include a copyright or a reference to the author / Google for commercial use?

    RE Q

  24. #29 by Xavier on November 30th, 2009 - 4:34 pm

    Sorry, but it doesn’t work for me…
    And when I call the proxy.php directly, I get this message: “Couldn’t resolve host ‘&hl=’”

    RE Q

  25. #30 by Xavier on December 2nd, 2009 - 3:21 pm

    more info:
    the script doesn’t seem to work if it is called from my application; but if I call it manually in my browser, the page source seems to be good (even with hl=fr).

    So at the moment, I have to use your proxy_url, but then I’m loosing the language option.

    Any help would be appreciated.
    Greets from Belgium where the apps says it’s raining ;o)

    RE Q

  26. #31 by Xavier on December 7th, 2009 - 5:18 pm

    Hello Dennis, still looking to have your app’ running from my server, but not luck until now.

    Could you give us the code for the crossdomain file?
    It might be the solution to have the language tag working…
    Thanks in advance.

    RE Q

  27. #32 by Dennis on December 8th, 2009 - 9:54 am

    @Xavier
    Hi Xavier,

    The crossdomain will only help if you get any security sandbox violations..

    This would be the way to go. Place the following code in a file called crossdomain.xml at the public root of your server

    1
2
3
4

    <cross-domain-policy xsi:noNamespaceSchemaLocation="http://www.adobe.com/xml/schemas/PolicyFile.xsd">
   <allow-access-from domain="*"/>
   <site-control permitted-cross-domain-policies="master-only"/>
</cross-domain-policy>

    Another possibility might be to make an URLRequest with multiple URLVariables to the proxy, so that it can accept the multiple parameters and execute the request right.

    Regards,

    Dennis

    RE Q

  28. #33 by Xavier on December 10th, 2009 - 10:18 am

    Hello Dennis,
    placing the xml helped, thank you.

    On the other hand, I had a problem with displaying the images that was solved by removing the “proxy_url” in “weatherIcon.source” from the two “xxxConditionComponent.mxml” files.

    So now, everything’s working like a charm…
    Thank you for this great component and for your time.

    RE Q

  29. #34 by Pulse1981 on February 15th, 2010 - 11:27 am

    Hi, i’v been trying this tutorial but my Proxy is not working.

    I have the code of your URL (http://xmlrpcflash.mattism.com/proxy_info.php) and this code in crossdomain.xml

    When I try this url (http://www.santodomingodelacalzada.org/xml_proxy.php?url=http://www.google.com/ig/api?weather=Toronto,ON), says to me, connection time out. ¿Can you send mi the last update of your proxy code?

    Thanks and regards from Spain.

    RE Q

  30. #35 by Pulse1981 on February 15th, 2010 - 11:28 am

    RE Q

    • #36 by Dennis on February 16th, 2010 - 1:40 pm

      Pulse1981,

      When trying to access both your urls, I get a nice 404 telling me that the files are not present on your webserver.

      Seems to me that this might be the problem? :P

      RE Q

  31. #37 by pulse1981 on February 17th, 2010 - 4:18 pm

    Sorry Dennis i’ve changed the proxy name. The url is:http://www.santodomingodelacalzada.org/proxy.php?url=http://www.google.com/ig/api?weather=Toronto,ON

    And the crossdomain exists again. I´ve deleted it trying…

    But I`ve tried the same proxy in other hosting and works!. Works with and without corossdomain.xml. Hosting support didn`t gave me any solution.

    Thanks!

    RE Q

  32. #38 by pulse1981 on February 22nd, 2010 - 12:34 pm

    Hi again dennis.

    I can run this flash only in IE. Fails in firefox or crome. ¿any solution?

    http://74.54.71.139/~santodom/index2010.php

    http://74.54.71.139/~santodom/xml_proxy.php

    Thanks

    RE Q

    • #39 by Dennis on February 22nd, 2010 - 11:06 pm

      Hi pulse,

      When navigating to that url in firefox, safari and opera, they all seem to work fine!

      Try clearing your browser cache and reloading the page.
      Maybe that helps.

      Regards,

      Dennis

      RE Q

  33. #40 by Ocelyn on March 3rd, 2010 - 10:18 pm

    Hi Dennis, thanks for sharing ! Great stuff :)

    I have a question, the xml files which is returned propos only the next 3 days of weather forecast, I watch on iGoogle that we can have more than 3 days, is it possible to request more days with this url ?

    Thanks.

    RE Q

    • #41 by Dennis on March 4th, 2010 - 7:48 pm

      Unfortunately not, google is using the wunderground API for the iGoogle weather forecast.

      They indeed have a more advanced weather forecast.

      For more information check out http://www.wunderground.com/
      They also have a data feed similar to the google one.
      In fact, I have a hunch that google is using this feed (or a non public API) in their own implementation for google weather.
      For more information on this feed, checkout their wiki http://wiki.wunderground.com/index.php/API_-_XML

      Another option for a more extended forecast you can find on http://www.weather.com/services/, under weather xml data feed.
      However, a couple of developers already pointed out to me that they prefer the google API over the one from Weather.com, because the google data can be retreived faster.

      Personally, if I was on a project now that needed weather data, I would definitely go for the wunderground one.

      Greets from Belgium, where weather sucks *ss :P

      RE Q

  34. #42 by Sidney Rees on March 20th, 2010 - 9:39 pm

    I am getting the following error on the example app you posted:

    GoogleWeatherService Error: Error #1085: The element type “meta” must be terminated by the matching end-tag “”.

    I guess it is a little bug.

    Kind regards,

    Sidney
    Sr Flex Developer

    RE Q

SetPageWidth