Display Local Weather Data On Your Site
Views (Total / Last 10 Days):
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 Value of 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
Figure 1 - This is a screen shot of a simple web
page that displays current local weather conditions.
|Current Weather Conditions XML Feeds|
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" ?>
<credit>NOAA's National Weather Service</credit>
<title>NOAA's National Weather Service</title>
<suggested_pickup>15 minutes after the hour</suggested_pickup>
<location>Chicago Midway Airport, IL</location>
<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
<temperature_string>50 F (10 C)</temperature_string>
<wind_string>From the North at 6 MPH</wind_string>
<pressure_string>29.67" (1005.0 mb)</pressure_string>
<dewpoint_string>42 F (6 C)</dewpoint_string>
<windchill_string>48 F (9 C)</windchill_string>
|Use XSL to Transform the XML Feed|
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:output omit-xml-declaration="yes" method="html" />
<!-- This is an XSL template file. -->
<table bgcolor="#eeeeee" cellspacing="0" cellpadding="1">
<xsl:if test="current_observation/weather != ''">
<xsl:if test="current_observation/temperature_string != ''">
<xsl:if test="current_observation/relative_humidity != ''">
<xsl:value-of select="current_observation/relative_humidity"/> %
<xsl:if test="current_observation/wind_string != ''">
<xsl:if test="current_observation/windchill_string != '' and
current_observation/windchill_string != 'NA'">
<xsl:if test="current_observation/heat_index_string != '' and
current_observation/heat_index_string != 'NA'">
|When the XML Feed Is Unavailable|
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" ?>
<observation_time>Is Not Available</observation_time>
|Putting the Weather on a Web Page|
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
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"
protected void Page_Load(object sender, EventArgs e)
System.Xml.XmlDocument doc = new System.Xml.XmlDocument();
Xml1.Document = doc;
Xml1.DocumentSource = "App_Data/Weather.xml";
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Local Weather Conditions</title>
<form id="form1" runat="server">
<div style="font-family: Arial, 'Microsoft Sans Serif';font-size: 10pt;">
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
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