Create A Weather Web Part for SharePoint

UPDATE: June 2, 2011
I made some adjustments to the XSLT. If you've had problems getting this to work previously, you might want to try it again.

I wanted to add weather information to a SharePoint site (a "My Site" to be exact), but I wanted something relatively simple.  Using the Page Viewer or Content Editor web parts was not really giving me what I wanted since that involved including snippets of markup and javascript which might also require signing up for the privilege.  I also wasn't keen on including all of their branding.  Just tell me what I'm missing outside when I'm stuck inside.

So I did some messing around with the RSS Viewer web part and got something working.  I then found that the RSS Viewer has a 30-minute cache restriction that cannot be changed.  I don't want to know how warm it was 29 minutes ago, I want to be able to refresh and know what the temperature is now.  So I switched to the XML web part which is what I should have used to start with.

This was the result:


And here are the steps to that end:
  • Add an XML Web Part to your page.
  • Modify the Shared Web Part.
  • In the "XML Link" field enter the URL to the appropriate Yahoo! Weather RSS Feed.  (For Kevil, KY the url would be "http://weather.yahooapis.com/forecastrss?u=f&w=2432010".)
  • Click the "XSL Editor..." button and paste the following into the text area:
    <!--?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">
          #tywpMain {position:relative;padding:0;margin:0;height:80px;}
          #tywpLocation {font-family:"Arial Black";font-size:16pt;color:#fff;background-color:#f0f0f0;padding:10px;}
          #tywpTemperature {position:absolute;top:25px;left:80px;font-family:Arial Narrow;font-size:32pt;font-weight:bolder;color:#000;display:block;width:80px;text-align:center;z-index:10;}
          #tywpTemperatureHigh {position:absolute;top:40px;left:170px;font-family:Arial Narrow;font-size:8pt;font-weight:bolder;color:#800000;}
          #tywpTemperatureLow {position:absolute;top:50px;left:170px;font-family:Arial Narrow;font-size:8pt;font-weight:bolder;color:#000080;}
          #tywpConditionImage {position:absolute;top:25px;left:0;right:80px;display:block;width:80px;text-align:center;}
          #tywpCondition {position:absolute;top:67px;left:0px;right:80px;font-family:Arial;font-size:8pt;font-weight:bolder;color:#c0c0c0;display:block;width:80px;text-align:center;}
        </style>
    
        <xsl:variable name="Scale">
          <xsl:value-of select="rss/channel/yweather:units/@temperature" />
        </xsl:variable>
        <xsl:variable name="ConditionImage" select="rss/channel/item/yweather:condition/@code" />
    
        <div id="tywpMain">
          <div id="tywpLocation">
            <xsl:value-of select="rss/channel/yweather:location/@city" />,
            <xsl:value-of select="rss/channel/yweather:location/@region" />
          </div>
          <span id="tywpTemperature">
            <xsl:value-of select="rss/channel/item/yweather:condition/@temp" />
            <xsl:text>°</xsl:text>
            <xsl:copy-of select="$Scale" />
          </span>
          <span id="tywpTemperatureHigh">
            High <xsl:value-of select="rss/channel/item/yweather:forecast/@high" /><xsl:text>°</xsl:text>
          </span>
          <span id="tywpTemperatureLow">
            Low <xsl:value-of select="rss/channel/item/yweather:forecast/@low" /><xsl:text>°</xsl:text>
          </span>
          <span id="tywpConditionImage">
            <img src="http://us.i1.yimg.com/us.yimg.com/i/us/we/52/{$ConditionImage}.gif" />
          </span>
          <span id="tywpCondition">
            <xsl:value-of select="rss/channel/item/yweather:condition/@text" />
          </span>
        </div>
      </xsl:template>
    </xsl:stylesheet>
    

And that's it!

Obviously you would change the WOEID to match your own target city.  More information on how to determine that can be found on the Yahoo! Developer Network page relating to the Yahoo! Weather RSS Feed.

This was just a quick'n'dirty option using out of the box components.  No SharePoint Designer.  No Visual Studio.  No jQuery.  Not that those things are bad.  Not at all.  They just are not reasonable starting positions for Joe (or Jane) Average SharePoint User.

So that said, I am sure there are plenty of ways to improve on the results.  If this was helpful and/or you have a different/better approach, I'd love to hear about it!