This is a toy example that I used to challenge my students at seminario II. The idea is to display the Yahoo! Weather information in a google map, as showed in this page (click in the marker and the weather info for Valparaíso will appear).
We first grab the information, by a php script, from the Yahoo! Weather RSS feed. The feed is available from the URL http://weather.yahooapis.com/forecastrss?w=349861&u=c, where w is the corresponding code for Valparaíso, and u is the temperature unit in Celsius. This php scrip can communicate with the client (the html page with the map) by JSON or XML. The XML version is contributed by Jorge Flores a student in Seminario II (¡¡Gracias Jorge!!).
The XML from the feed looks like
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <rss version="2.0" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"> <channel> <title>Yahoo! Weather - Valparaiso, CI</title> <link>http://us.rd.yahoo.com/dailynews/rss/weather/Valparaiso__CI/*http://weather.yahoo.com/forecast/CIXX0026_c.html</link> <description>Yahoo! Weather for Valparaiso, CI</description> <language>en-us</language> <lastBuildDate>Tue, 11 May 2010 6:00 pm CLT</lastBuildDate> <ttl>60</ttl> <yweather:location city="Valparaiso" region="" country="CI"/> <yweather:units temperature="C" distance="km" pressure="mb" speed="km/h"/> <yweather:wind chill="11" direction="190" speed="9.66" /> <yweather:atmosphere humidity="88" visibility="4.01" pressure="982.05" rising="0" /> <yweather:astronomy sunrise="7:26 am" sunset="5:58 pm"/> <image> <title>Yahoo! Weather</title> <width>142</width> <height>18</height> <link>http://weather.yahoo.com</link> <url>http://l.yimg.com/a/i/us/nws/th/main_142b.gif</url> </image> <item> <title>Conditions for Valparaiso, CI at 6:00 pm CLT</title> <geo:lat>-32.78</geo:lat> <geo:long>-71.53</geo:long> <link>http://us.rd.yahoo.com/dailynews/rss/weather/Valparaiso__CI/*http://weather.yahoo.com/forecast/CIXX0026_c.html</link> <pubDate>Tue, 11 May 2010 6:00 pm CLT</pubDate> <yweather:condition text="Fog" code="20" temp="11" date="Tue, 11 May 2010 6:00 pm CLT" /> <description><![CDATA[ <img src="http://l.yimg.com/a/i/us/we/52/20.gif"/><br /> <b>Current Conditions:</b><br /> Fog, 11 C<BR /> <BR /><b>Forecast:</b><BR /> Tue - Cloudy. High: 20 Low: 9<br /> Wed - Partly Cloudy. High: 20 Low: 9<br /> <br /> <a href="http://us.rd.yahoo.com/dailynews/rss/weather/Valparaiso__CI/*http://weather.yahoo.com/forecast/CIXX0026_c.html">Full Forecast at Yahoo! Weather</a><BR/><BR/> (provided by <a href="http://www.weather.com" >The Weather Channel</a>)<br/> ]]></description> <yweather:forecast day="Tue" date="11 May 2010" low="9" high="20" text="Cloudy" code="26" /> <yweather:forecast day="Wed" date="12 May 2010" low="9" high="20" text="Partly Cloudy" code="30" /> <guid isPermaLink="false">CIXX0026_2010_05_11_18_00_CLT</guid> </item> </channel> </rss><!-- api4.weather.ac4.yahoo.com compressed/chunked Wed May 12 06:05:42 PDT 2010 -->
We can observe that there are two different name spaces, yweather and geo. We need just those names under yweather. In particular we use yweather:condition, this element holds the current weather information on its attributes.
JSON version
The php goes as follows
<?php
//First send the corresponding headers
header("Content-type= application/json");
//get the XML data from the URL
$xml = simplexml_load_file("http://weather.yahooapis.com/forecastrss?w=349861&u=c");
//obtaining the namespace for yweather
$yweather =$xml->channel->item->children("http://xml.weather.yahoo.com/ns/rss/1.0");
//traverse the SimpleXML object and store in a associative array
foreach( $yweather->condition->attributes() as $k=>$attr)
$condition[$k] = $attr;
//JSON enconde and print
print(json_encode($condition));
?>
On the html page we receive the information in the JSON format and passed to the openInfoWindowHtml() method of google maps.
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADI36Gd6uqs4OgrvF2FK3TRS3WQwwXk35PFrPy_oZlvjggyWGmxSJfJA31Kd06D9lQVQJpKvCzFGD3g"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
//a marker placed in our university
var center = new GLatLng(-33.033276,-71.594682);
map.setCenter(center, 15);
var marker = new GMarker(center, {draggable: true});
//Adding Yahoo! Weather
GEvent.addListener(marker, "click",
function(){
// create the Google version of XMLHttpRequest object
var request = GXmlHttp.create();
request.open("GET", "weather2.php", true);
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200){
var xhtml = "<b>Yahoo! Weather</b>";
xhtml += "<br />";
var yw_json = request.responseText;
//dirty JSON evaluation
var yw = eval('(' + yw_json + ')');
xhtml = xhtml + "temperatura =" + yw.temp[0] +" ºC <br />";
xhtml += yw.date[0];
marker.openInfoWindowHtml(xhtml);
}
}
//send the request
request.send(null);
});
map.addOverlay(marker);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 800px; height: 500px"></div>
</body>
</html>
XML version
The php goes as follows
<?php
//First the corresponding XML headers
header("Content-type: text/xml");
//Jorge sends the location by GET
$w = $_GET["w"];
$url = "http://weather.yahooapis.com/forecastrss?w=" . $w . "&u=c";
if($xml = file_get_contents($url)){
$obj = simplexml_load_string($xml);
$item = $obj->channel->item;
//formatting the XML output
print("<weather>");
print("<title>" . $item->title . "</title>");
//getting the namespace
$child = $item->children("http://xml.weather.yahoo.com/ns/rss/1.0");
$att = $child->condition->attributes();
print("<temp>" . $att->text . " " . $att->temp . "ºC</temp>");
print("</weather>");
}
?>
Jorge’s html file goes like this
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzsVe8ueaD3_5_TOp88LiKRTmhXfEnveThyX0qgmXnRV_0BrCwBTi62Ue7Uv5MEgulw1nxTmAQ2jihA" type="text/javascript"></script>
<script type="text/javascript">
function load(){
var map = new GMap2(document.getElementById("map"));
var point = new GLatLng(-33.05,-71.6);
var w = 349861;
map.setCenter(point,13);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker,"click",function(){
var request = GXmlHttp.create();
request.open("GET","getWeather.php?w=" + w,true);
request.onreadystatechange = function(){
if(request.readyState == 4 & request.status == 200){
var weather = request.responseXML.getElementsByTagName("weather")[0];
var title = weather.getElementsByTagName("title")[0].firstChild.nodeValue;
var temp = weather.getElementsByTagName("temp")[0].firstChild.nodeValue;
var xhtml = "<b>" + title + ":</b> <br />";
xhtml += "<div align=center><h2>" + temp + "</h2></div>";
map.openInfoWindowHtml(point,xhtml);
}
}
request.send(null);
}
);
}
</script>
</head>
<body onload="load();">
<div id="map" style="height:100%; width:100%"> </div>
</body>
</html>
The main differences with the JSON version are in the request.onreadystatechange handler, where there is a little more code to traverse the XML data. You can check the result here
