WaterWatch ToolKit

USGS WaterWatch GoogleMap

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

  1. 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.
  2. 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.
  3. 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/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:
            1. 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&amp;v=2.x&amp;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:
        legend
      2. Wet-Dry bar:

        legend

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="wwgmap/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="wwgmap/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>