MOSS XSLT weather webpart

One of my Colleagues happen to ask me how do we show the weather web-part on our Sharepoint Portal. The Solution was pretty simple and thought I should share this with you all. Following are the steps:

1. Add the RSS web-part on your sharepoint portal (MOSS, Sharepoint 2007) site.

2. Give the RSS feed as: http://weather.yahooapis.com/forecastrss?p=08810 (p is the Parameter for your zip code)

3. Now the most important part, open the XSL editor of your RSS web-part and remove everything from there and then just paste one of the XSL codes (show below) into that. Thats it you are done, your weather web-part is ready now. So all that is important here is XSL.

Following are the views that you can have from the XSL 

Weather1

Weather2

Weather3

Weather4

So the XSL (first variation)is:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output method="html" indent="yes"/>

<xsl:template match="/">

<xsl:variable name="scale">
<xsl:value-of select="rss/channel/yweather:units/@temperature"/>
</xsl:variable>

<table width="100%" border="0" cellspacing="0" cellpadding="3" class="Normal">
<tr bgcolor="#CCCCCC">
<td colspan="2"><strong>Weather Report - <xsl:value-of select="rss/channel/item/title"/></strong></td>
</tr>
<tr>
<td><strong>Currently <font size="4"><xsl:value-of select="rss/channel/item/yweather:condition/@temp"/><xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" /></font></strong><br/>
High <xsl:value-of select="rss/channel/item/yweather:forecast/@high"/> <xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" /> <br/>
Low <xsl:value-of select="rss/channel/item/yweather:forecast/@low"/> <xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" /> </td>
<td>
<xsl:text disable-output-escaping="yes">&lt;img src="http://us.i1.yimg.com/us.yimg.com/i/us/we/52/</xsl:text>
<xsl:value-of select="rss/channel/item/yweather:condition/@code"/>
<xsl:text disable-output-escaping="yes">.gif"/&gt;</xsl:text>
<br/>
<xsl:value-of select="rss/channel/item/yweather:condition/@text"/></td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="2"><strong>2 Day Forecast</strong></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="3" class="Normal">
<xsl:for-each select="(rss/channel/item/yweather:forecast)[position() &lt; 3]">
<tr>
<td><xsl:value-of select="@day"/></td>
<td>
<xsl:text disable-output-escaping="yes">&lt;img src="http://us.i1.yimg.com/us.yimg.com/i/us/we/52/</xsl:text>
<xsl:value-of select="@code"/>
<xsl:text disable-output-escaping="yes">.gif"/&gt;</xsl:text>
</td>
<td><xsl:value-of select="@text"/><br/>High: <xsl:value-of select="@high"/>
<xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" />
Low: <xsl:value-of select="@low"/><xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" />
</td>
</tr>
</xsl:for-each>
</table></td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="2"><strong>More Current Condition Details</strong></td>
</tr>
<tr>
<td colspan="2"><table border="0" cellspacing="0" cellpadding="3" class="Normal">
<tr>
<td>High </td>
<td><xsl:value-of select="rss/channel/item/yweather:forecast/@high"/> <xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" /></td>
</tr>
<tr>
<td>Low </td>
<td><xsl:value-of select="rss/channel/item/yweather:forecast/@low"/> <xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" /></td>
</tr>
<tr>
<td>Wind Chill </td>
<td><xsl:value-of select="rss/channel/yweather:wind/@chill"/> <xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" /></td>
</tr>
<tr>
<td>Wind Speed </td>
<td>
<xsl:value-of select="rss/channel/yweather:wind/@speed"/>
<xsl:text> </xsl:text>
<xsl:value-of select="rss/channel/yweather:units/@speed"/>
</td>
</tr>
<tr>
<td>Wind Direction </td>
<td>
<xsl:value-of select="rss/channel/yweather:wind/@direction"/>
</td>
</tr>
<tr>
<td>Sunrise </td>
<td>
<xsl:value-of select="rss/channel/yweather:astronomy/@sunrise"/>
</td>
</tr>
<tr>
<td>Sunset </td>
<td>
<xsl:value-of select="rss/channel/yweather:astronomy/@sunset"/>
</td>
</tr>
<tr>
<td>Latitude </td>
<td><xsl:value-of select="rss/channel/item/geo:lat"/></td>
</tr>
<tr>
<td>Longitude </td>
<td><xsl:value-of select="rss/channel/item/geo:long"/></td>
</tr>
<tr>
<td>
<p><xsl:text> </xsl:text></p>
<p>
<a href="http://weather.yahoo.com" target="_blank"></a>
</p>
</td>
</tr>
</table></td>
</tr>
</table>

</xsl:template>

</xsl:stylesheet>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Second Alternative (second variation):

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output method="html" indent="yes"/>

<xsl:template match="/">

<xsl:variable name="scale">
<xsl:value-of select="rss/channel/yweather:units/@temperature"/>
</xsl:variable>

<table width="100%" border="0" cellspacing="0" cellpadding="3" class="Normal">
<tr bgcolor="#CCCCCC">
<td colspan="2"><strong>Weather Report - <xsl:value-of select="rss/channel/item/title"/></strong></td>
</tr>
<tr>
<td><strong>Currently <font size="4"><xsl:value-of select="rss/channel/item/yweather:condition/@temp"/><xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" /></font></strong><br/>
High <xsl:value-of select="rss/channel/item/yweather:forecast/@high"/> <xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" /> <br/>
Low <xsl:value-of select="rss/channel/item/yweather:forecast/@low"/> <xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" /> </td>
<td>
<xsl:text disable-output-escaping="yes">&lt;img src="http://us.i1.yimg.com/us.yimg.com/i/us/we/52/</xsl:text>
<xsl:value-of select="rss/channel/item/yweather:condition/@code"/>
<xsl:text disable-output-escaping="yes">.gif"/&gt;</xsl:text>
<br/>
<xsl:value-of select="rss/channel/item/yweather:condition/@text"/></td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="2"><strong>2 Day Forecast</strong></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="3" class="Normal">
<xsl:for-each select="(rss/channel/item/yweather:forecast)[position() &lt; 3]">
<tr>
<td><xsl:value-of select="@day"/></td>
<td>
<xsl:text disable-output-escaping="yes">&lt;img src="http://us.i1.yimg.com/us.yimg.com/i/us/we/52/</xsl:text>
<xsl:value-of select="@code"/>
<xsl:text disable-output-escaping="yes">.gif"/&gt;</xsl:text>
</td>
<td><xsl:value-of select="@text"/><br/>High: <xsl:value-of select="@high"/>
<xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" />
Low: <xsl:value-of select="@low"/><xsl:text>&#176;</xsl:text><xsl:copy-of select="$scale" />
</td>
</tr>
</xsl:for-each>
</table></td>
</tr>
<tr>
<td colspan="2">
<p>
<a href="http://weather.yahoo.com" target="_blank">Powered by Yahoo Weather</a>
</p>
</td>
</tr>
</table>

</xsl:template>

</xsl:stylesheet>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

XSL Number:- 3

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output method="html" indent="yes"/>

<xsl:template match="/">
<style type="text/css">
.location {
width: 100%;
text-align: left;
font-family: Tahoma;
font-size: 10pt;
background: #ffffff;
color: #075199;
border-collapse:collapse;
border-color: #ace #ebf3fb #ace;
}

.location a:link, a:visited { text-decoration: none; }
.location a:hover { text-decoration: underline;}

.weather-condition {
padding: 0px; 0px; 0px; 0px;
width: 80px;
min-width: 80px;
max-width: 100px;
text-align: center;
font-family: Tahoma;
font-size: 8.4pt;
bacground: #ffffff;
color: #666;
}

.temprature {
width: 50px;
max-width: 70px;
padding: 3px 6px 3px 6px;
text-align: center;
font-family: Tahoma;
font-size: 10.5pt;
border-collapse:collapse;
border-color: #ace #ebf3fb #ace;
color: #333333;
font_weight: 700;
}

.high-low-text {
padding-right: 3px;
text-align: left;
font-family: Tahoma;
font-size: 8.4pt;
font-weight: 700;
color: #666;
}
.high-low-value {
text-align: left;
font-family: Tahoma;
font-size: 8.4pt;
font-weight: 400;
color: #075199;
color: #333333;
}
</style>
<table align="center">
<tr>
<td class="location" colspan="3">
<a class="location" href="{rss/channel/item/link}">
<xsl:value-of select='rss/channel/yweather:location/@city'/>
<xsl:choose>
<xsl:when test="rss/channel/yweather:location/@country='US'">
, <xsl:value-of select='rss/channel/yweather:location/@region'/>
</xsl:when>
<xsl:otherwise>
, <xsl:value-of select='rss/channel/yweather:location/@country'/>
</xsl:otherwise>
</xsl:choose>
</a>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="weather-condition" >
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/we/52/{rss/channel/item/yweather:condition/@code}.gif" />
</td>
</tr>
<tr>
<td class="weather-condition" >
<xsl:value-of select='rss/channel/item/yweather:condition/@text'/>
</td>
</tr>
</table>
</td>
<td class="temprature" >
<xsl:value-of select='rss/channel/item/yweather:condition/@temp'/>
<xsl:text>&#176;</xsl:text>
</td>
<td>
<table>
<tr>
<td class="high-low-text">High:</td>
<td class="high-low-value">
<xsl:value-of select="rss/channel/item/yweather:forecast/@high"/>
<xsl:text>&#176;</xsl:text>
</td>
</tr>
<tr>
<td class="high-low-text">Low:</td>
<td class="high-low-value">
<xsl:value-of select="rss/channel/item/yweather:forecast/@low"/>
<xsl:text>&#176;</xsl:text>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr style="color:#C0C0C0; height:1px; padding: 0px 0px 0px 0px"/>
</xsl:template>
</xsl:stylesheet>