USGS WaterWatch GoogleMap
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:
- wwgmaps/ -- A directory of necessary programs and sample data.
- 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.
- 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.
- Sign up just for a host name, i.e. top level so that a key can be used for all sub urls.
- 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.
- For IE browser compalibitly, update <html> tag as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
- Add 'default' style if necessary at <head>:
<link type="text/css" rel='stylesheet' href="wwgmaps/wwgmap.css" />
- Add 'onload' and 'onunload' attributes in <body> tag:
<body onload="xgload('xml_file_nm', mext_infos)" onunload="GUnload()">
where
- 'xml_file_nm' -- A file name in XML format. The file contains USGS streamgage and streamflow information.
- 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
- 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'
- 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()">
- mext_infos -- Specify map center and extention in JSON:
- 'cc_lat', 'cc_lng' -- The latitude and logntitude of center of a state, respectively.
- 'zoom_level' -- Google map zoom level from 1 to 18. In most cases, zoom level is 6, 7 or 8.
- If zoom level is specifed, 'sw_lat', 'sw_lng', 'ne_lat', and 'ne_lng' will not be used.
- Default zoom level is 7.
- 'sw_lat', 'sw_lng, 'ne_lat', 'ne_lng'' -- The latitude and logntitude of southwest and northeast corders of a state, respectively.
- 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,
- 'mt' -- the map type.
- Example:
<body onload="xgload('wwgmaps/wwgmap_demo.xml',{cc_lat: 38.61, cc_lng: -97.95, zoom_level:7, mt: 'real'})"
onunload="GUnload()">
- Add GoogleMap container in <body>
<div id='map' style="height:500px; width: 800px;"></div>
where 'height' and 'width' can be changed as needed.
- 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.
- Add legend:
WaterWatch provides two images for legend:
- Detailed legend:
- 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="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>