The weather affects all of us in many ways. For example, the weather helps us to decide what type of clothing to weather, whether or not to carry an umbrella, and even how much time we might want to spend outside. Or, a storm might interrupt power making it difficult to keep our PC running. It is not surprising then to hear people asking: "What is it like outside?" or "What is the weather?"

The internet is being used by more and more people to obtain the most current information. This includes the current local weather conditions. Therefore, providing weather data on your web site is a feature that users need and will appreciate. And as you probably already know, satisfied users are good for business.

Reading the rest of this article will help you see how easy it can be to add weather information on your web site. Figure 1 shows you an example of how XML weather feeds can be transformed with XSL and added to a web page.

Figure 1 - This is a screen shot of a simple web page that displays current local weather conditions.

XML is a great choice for distributing data. That is probably why the National Weather Service (NWS) has chosen XML as the format to distribute their current weather conditions for about 1,800 locations in the United States. These feeds are updated hourly and come in both XML and RSS formats. The focus of this article will be using the XML feeds to display current local weather conditions on your web site.

The first step is to go to the NWS web site using this link. Once you are at the NWS site, to find your local weather station just select a state and then select the orange and white XML image next to the location that you want to display in the XML column. There are two columns of XML images; the first column contains a link to the RSS file, the second column links to the XML file and that is the one you want. What you are looking for is the four character station ID. In my example I will be using the station ID for Chicago's Midway Airport which is KMDW. Once you click on the link, the XML feed will be displayed in your browser. It will look similar to Listing 1 for Midway Airport. The URL for the XML feed you have chosen will be in your web browser's address bar. You will need to write down or copy and paste this URL so that we can use it when building our web page.

Listing 1 shows a snapshot of an actual XML feed for Chicago's Midway Airport. This snapshot was taken from this URL. The URL you saved should look identical except for the four character station ID. Taking a look at the different nodes in the listing will give you an idea of what current weather conditions can be displayed.

Listing 1 - This is a copy of the XML feed for Chicago's Midway Airport

<?xml version="1.0" encoding="ISO-8859-1" ?>
<current_observation version="1.0" 
xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation=
"http://www.weather.gov/data/current_obs/current_observation.xsd">
<credit>NOAA's National Weather Service</credit> 
<credit_URL>http://weather.gov/</credit_URL> 
<image>
<url>http://weather.gov/images/xml_logo.gif</url> 
<title>NOAA's National Weather Service</title> 
<link>http://weather.gov</link> 
</image>
<suggested_pickup>15 minutes after the hour</suggested_pickup> 
<suggested_pickup_period>60</suggested_pickup_period> 
<location>Chicago Midway Airport, IL</location> 
<station_id>KMDW</station_id> 
<latitude>41.47.03N</latitude> 
<longitude>087.45.19W</longitude> 
<observation_time>Last Updated on Jan 5, 7:51 pm CST</observation_time> 
<observation_time_rfc822>Fri, 5 Jan 2007 19:51:00 -0600 CST
</observation_time_rfc822> 
<weather>Overcast</weather> 
<temperature_string>50 F (10 C)</temperature_string> 
<temp_f>50</temp_f> 
<temp_c>10</temp_c> 
<relative_humidity>74</relative_humidity> 
<wind_string>From the North at 6 MPH</wind_string> 
<wind_dir>North</wind_dir> 
<wind_degrees>340</wind_degrees> 
<wind_mph>5.75</wind_mph> 
<wind_gust_mph>NA</wind_gust_mph> 
<pressure_string>29.67" (1005.0 mb)</pressure_string> 
<pressure_mb>1005.0</pressure_mb> 
<pressure_in>29.67</pressure_in> 
<dewpoint_string>42 F (6 C)</dewpoint_string> 
<dewpoint_f>42</dewpoint_f> 
<dewpoint_c>6</dewpoint_c> 
<heat_index_string>NA</heat_index_string> 
<heat_index_f>NA</heat_index_f> 
<heat_index_c>NA</heat_index_c> 
<windchill_string>48 F (9 C)</windchill_string> 
<windchill_f>48</windchill_f> 
<windchill_c>9</windchill_c> 
<visibility_mi>10.00</visibility_mi> 
<icon_url_base>http://weather.gov/weather/images/fcicons/</icon_url_base> 
<icon_url_name>novc.jpg</icon_url_name> 
<two_day_history_url>http://www.weather.gov/data/obhistory/KMDW.html
</two_day_history_url> 
<ob_url>http://www.nws.noaa.gov/data/METAR/KMDW.1.txt</ob_url> 
<disclaimer_url>http://weather.gov/disclaimer.html</disclaimer_url> 
<copyright_url>http://weather.gov/disclaimer.html</copyright_url> 
<privacy_policy_url>http://weather.gov/notice.html</privacy_policy_url> 
</current_observation>

Now that we have the XML feed, we need to create an XSL file to transform it into HTML so that we can display it on our web site. After we have decided which nodes to display from the XML feed we need to decide how to transform them with XSL.

Looking at the XSL in Listing 2 you will notice that a test is made to see if certain nodes exist before displaying them. The reason for this is that this example uses a default XML file that gets loaded if the XML feed is unavailable.

You may have noticed in the XML feed in Listing 1 that some of the nodes contained a value of "NA." The NWS is using this value to indicate that there is no currently applicable data for that node. Some examples of nodes that might contain NA values are heat index, wind chill, and wind gust. This NA value can be used to determine whether or not to display a certain node. For example, there are only heat index or wind chill values under certain conditions and sometimes there is neither. You do not want to display the label for heat index followed by NA. So, the example XSL checks to see if the wind chill node is NA before displaying it.

I have created an example XSL style sheet which is shown in Listing 2. Name the XSL file Weather.xsl and place it in the App_Data folder of your web application.

Listing 2 - This is the XSL file that we will use to transform the XML weather feed.

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes" method="html" />
<xsl:template match="/">
  <!-- This is an XSL template file. -->
  <table bgcolor="#eeeeee" cellspacing="0" cellpadding="1">
    <tr bgcolor="lightsteelblue">
      <td colspan="2">
        <xsl:value-of select="current_observation/location"/>
        <br/>
        <xsl:value-of select="current_observation/observation_time"/>
      </td>
    </tr>
    <xsl:if test="current_observation/weather != ''">
    <tr>
      <td>
        Weather:
      </td>
      <td>
        <xsl:value-of select="current_observation/weather"/>
      </td>
    </tr>
    </xsl:if>
    <xsl:if test="current_observation/temperature_string != ''">
    <tr>
      <td>
        Temperature:
      </td>
      <td>
        <xsl:value-of select="current_observation/temperature_string"/>
      </td>
    </tr>
    </xsl:if>
    <xsl:if test="current_observation/relative_humidity != ''">
    <tr>
      <td>
        Humidity:
      </td>
      <td>
        <xsl:value-of select="current_observation/relative_humidity"/> %
      </td>
    </tr>
    </xsl:if>
    <xsl:if test="current_observation/wind_string != ''">
    <tr>
      <td>
        Wind:
      </td>
      <td>
        <xsl:value-of select="current_observation/wind_string"/>
      </td>
    </tr>
    </xsl:if>
    <xsl:if test="current_observation/windchill_string != '' and 
    current_observation/windchill_string != 'NA'">
    <tr>
      <td>
        Wind Chill:
      </td>
      <td>
        <xsl:value-of select="current_observation/windchill_string"/>
      </td>
    </tr>
    </xsl:if>
    <xsl:if test="current_observation/heat_index_string != '' and 
    current_observation/heat_index_string != 'NA'">
    <tr>
      <td>
        Heat Index:
      </td>
      <td>
        <xsl:value-of select="current_observation/heat_index_string"/>
      </td>
    </tr>
    </xsl:if>   </table>
</xsl:template>
</xsl:stylesheet> 

The most likely thing to cause a problem with displaying our weather conditions is the availability of the weather feed from the NWS. So, we want to plan ahead for that by creating a default XML file that can be loaded if the feed becomes unavailable.

The default XML in my example simple displays a messaging stating that weather information is not currently available. If you look back up at the XSL in Listing 2 you will notice that there is not a test to see if the location and observation time nodes exist. This is because they are in the default XML file. The other nodes are not in the default XML file so the check is made to suppress the labels. As an alternative you could just hide the XML control in the web page or have the XSL display nothing at all.

I have created an example default XML file which is shown in Listing 3. Name the XML file Weather.xml and place it in the App_Data folder of your web application.

Listing 3 - This is the default XML file that will be loaded when the weather feed is unavailable.

<?xml version="1.0" encoding="utf-8" ?>
<current_observation>
  <location>Weather Information</location>
  <observation_time>Is Not Available</observation_time>
</current_observation>

Now that we have all the pieces in place, we need to create a web page that will display our current weather. The web page contains an XML control that will be used to display the current weather conditions. Since the XSL file is static, we add it to the XML control by setting the TransformSource property.

When the web page loads, it attempts to load the NWS XML feed as an XML document and then use that XML document to set the XML control's Document property. If the XML feed is unavailable the default XML file is used to set the DocumentSource property for XML control instead.

I have created an example weather web page which is shown in Listing 4. Name the page Weather.aspx and place it in the root directory of your web application.

Listing 4 - Example of a simple web page that displays the weather

<%@ Page Language="C#" %>
<%@ OutputCache Location="None" VaryByParam="None" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {
        System.Xml.XmlDocument doc = new System.Xml.XmlDocument();
        try
        {
            doc.Load("http://www.weather.gov/data/current_obs/KMDW.xml");
            Xml1.Document = doc;
        }
        catch 
        {
            Xml1.DocumentSource = "App_Data/Weather.xml";
        }
    }

</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Local Weather Conditions</title>
</head>
<body>
<form id="form1" runat="server">
<div style="font-family: Arial, 'Microsoft Sans Serif';font-size: 10pt;">
<asp:Xml ID="Xml1"
 runat="server" TransformSource="App_Data/Weather.xsl"
 EnableViewState="false"></asp:Xml>
</div>
</form>
</body>
</html>

The NWS has made it very easy to display current local weather conditions on a web page by using XML feeds. Leveraging the power of XSL you can display weather data in a way that is useful and appealing. Hopefully, this article has given you some ideas on using the NWS XML feeds.

In fact, here are a few other possibilities that are not included in the example to preserve simplicity.

If you do not have a window in your office or cubicle you can add an image to your weather data that reflects outside conditions. The NWS supplies images that represent every possible text they might display in the "weather" node. You could then use the XSL to decide which image to display based on the text in this node.

If there are multiple weather stations near you or if you want to display weather data from several major US cities, you could add a dropdown list and let the user select which location to view.

Do you want to know what the weather was on this day last year? You could save the XML feeds to a database and then next year you will know.

There are more possibilities for using the NWS XML feeds, but the NWS actually offers more services than just current weather conditions. So, if this article has made you curious about the NWS and you want to know what they offer check out their web site.