WaterWatch

This page describes how to show USGS WaterWatch streamflow-condition GoogleMap in WSC's web page.

Download a WaterWatch GoogleMap package for necessary programs and examples to your web site. The package consists of the following files:
1. wwgmaps/ -- A directory of necessary programs and sample data.
2. wwgmap_demo11.html -- A demo html file. In order to run at your site, make sure to change a google map key near the end of file.
3. wwgmap_demo12.html -- A demo html file showing current streamflow conditions. It requires that a local system supports PHP. In order to run at your site, make sure to change a google map key near the end of file.
Sign up a Google-Maps key at http://code.google.com/apis/maps/signup.html.
1. Sign up just for a host name, i.e. top level so that a key can be used for all sub urls.
2. Different hosts require different keys.
Set up USGS WaterWatch GoogleMap:
The following decribes procedures to implement a WaterWatch GoogleMap into a web page. To customize a WaterWatch GoogleMap and to get its html codes, visit WaterWatch GoogleMap builder.
1. For IE browser compalibitly, update <html> tag as follows:
  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
2. Add 'default' style if necessary at <head>:
  <link type="text/css" rel='stylesheet' href="wwgmaps/wwgmap.css" />
3. Add 'onload' and 'onunload' attributes in <body> tag:
  <body onload="xgload('xml_file_nm', mext_infos)" onunload="GUnload()">
  where
  1. 'xml_file_nm' -- A file name in XML format. The file contains USGS streamgage and streamflow information.
    1. The file contents can be downloaded from USGS WaterWatch site at http://waterwatch.usgs.gov/download/?gt=map&st=<st>&mt=<mt>, where <st> is a two-letter state abbreviation and <mt> is map type: 'real' or 'flood'. For example,
      http://waterwatch.usgs.gov/download/?gt=map&st=ks&mt=real
    2. In order to refect the change of contents, automate download process is needed. In Unix system, adding a 'GET' command in a cron job will do it. For example,
      GET "http://waterwatch.usgs.gov/download/?gt=map&st=ks&mt=real" >| 'xml_file_nm'
    3. If the system supports PHP, use 'wwgmap_data.php?st=<st>&mt=<mt>' for 'xml_file_nm', where <st> is two letter state abbreviation and <mt> is a map type of 'real' or 'flood.' 'wwgmap_data.php' is included in the package. For example,
      <body onload="xgload('wwgmaps/wwgmap_data.php?st=ks&mt=real'', mext_infos)" onunload="GUnload()">
  2. mext_infos -- Specify map center and extention in JSON:
    1. 'cc_lat', 'cc_lng' -- The latitude and logntitude of center of a state, respectively.
    2. 'zoom_level' -- Google map zoom level from 1 to 18. In most cases, zoom level is 6, 7 or 8.
      1. If zoom level is specifed, 'sw_lat', 'sw_lng', 'ne_lat', and 'ne_lng' will not be used.
      2. Default zoom level is 7.
    3. 'sw_lat', 'sw_lng, 'ne_lat', 'ne_lng'' -- The latitude and logntitude of southwest and northeast corders of a state, respectively.
      1. Unless you have your own specifications, map extension of WaterWatch state maps can be obtained at http://waterwatch.usgs.gov/download/?gt=map&mt=cc&st=<st>, where <st> is a two-letter state abbreviation. For example, to get Kansas's map extension:
        
        http://waterwatch.usgs.gov/download/?gt=map&mt=cc&st=ks,
    4. 'mt' -- the map type.
  3. Example:
    <body onload="xgload('wwgmaps/wwgmap_demo.xml',{cc_lat: 38.61, cc_lng: -97.95, zoom_level:7, mt: 'real'})" onunload="GUnload()">
4. Add GoogleMap container in <body>
  <div id='map' style="height:500px; width: 800px;"></div>
  where 'height' and 'width' can be changed as needed.
5. Add Javascript for GoogleMap after </body> tag:
  <script src='http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAABqhIfnU-rjfEmqC1n6ivpxSI-p42h0V-2ck6RKDxi7TljzjcXBQPV_TGjihWdyi_-Z78thpZTbOZjg' type="text/javascript"></script>
  <script type="text/javascript" src="wwgmaps/wwgmap.js"></script>
  where
  'key' value should be replaced with your site Google key, which can be obtained at http://code.google.com/apis/maps/signup.html.
6. Add legend:
  WaterWatch provides two images for legend:
  1. Detailed legend:
  2. Wet-Dry bar:

Example 1: showing Kansas Map with a static xml file.

Here are source codes of an example of a html file showing WaterWatch map for Kansas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expies" content="-1" />
   <title>WaterWatch GoogleMap</title>
   <link type="text/css" rel='stylesheet' href="wwgmaps/wwgmap.css" />
</head>
<body onload="xgload('wwgmaps/wwgmap_demo.xml',{cc_lat: 38.61, cc_lng: -97.95, zoom_level:7})" 
   onunload="GUnload()">
<div style="width:800px;">
<div style='text-align:center;'>
	<div style='margin-top: 10px; margin-bottom: 10px;'>
  <p class='page_title' style='color:#FF0000;'>WaterWatch Google Map</p></div>
</div>
<div id='map' style="height:500px; width: 800px;"></div>
</div>
</body>
<script src='http://maps.google.com/maps?file=api&v=2.x&
  key=ABQIAAAABqhIfnU-rjfEmqC1n6ivpxSI-p42h0V-2ck6RKDxi7TljzjcXBQPV_TGjihWdyi_-Z78thpZTbOZjg' 
  type="text/javascript">
</script>
<script type="text/javascript" src="wwgmaps/wwgmap.js"></script>
</html>

Example 2: showing Kansas Map with dynamic or 'updated' contents

Here are source codes of an example of a html file showing WaterWatch map for Kansas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expies" content="-1" />
   <title>WaterWatch GoogleMap</title>
   <link type="text/css" rel='stylesheet' href="wwgmaps/wwgmap.css" />
</head>
<body onload="xgload('wwgmaps/wwgmap_data.php?st=ks',{cc_lat: 38.61, cc_lng: -97.95, zoom_level:7})"
   onunload="GUnload()">
<div style="width:800px;">
<div style='text-align:center;'>
	<div style='margin-top: 10px; margin-bottom: 10px;'>
    <p class='page_title' style='color:#FF0000;'>WaterWatch Google Map</p>
  </div>
</div>
<div id='map' style="height:500px; width: 800px;"></div>
</div>
</body>
<script src='http://maps.google.com/maps?file=api&v=2.x&
  key=ABQIAAAABqhIfnU-rjfEmqC1n6ivpxSI-p42h0V-2ck6RKDxi7TljzjcXBQPV_TGjihWdyi_-Z78thpZTbOZjg' 
  type="text/javascript">
</script>
<script type="text/javascript" src="wwgmaps/wwgmap.js"></script>
</html>

USGS WaterWatch GoogleMap

Example 1: showing Kansas Map with a static xml file.

Example 2: showing Kansas Map with dynamic or 'updated' contents