openlayers/examples/wmst.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers: WMS + Time</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <script src="../lib/OpenLayers.js"></script>
   7     <script type="text/javascript">
   8         var map, ia_wms;
   9         function init(){
  10             map = new OpenLayers.Map('map');
  11
  12             var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  13                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
  14
  15             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
  16                 "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
  17                 {layers: "landsat7"});
  18
  19             ia_wms = new OpenLayers.Layer.WMS("Nexrad","http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?",{layers:"nexrad-n0r-wmst",transparent:true,format:'image/png',time:"2005-08-29T13:00:00Z"});
  20
  21             jpl_wms.setVisibility(false);
  22
  23             map.addLayers([ol_wms, jpl_wms, ia_wms]);
  24             map.addControl(new OpenLayers.Control.LayerSwitcher());
  25             map.zoomToExtent(new OpenLayers.Bounds(-100.898437,22.148438,-78.398437,39.726563));
  26         }
  27         function update_date() {
  28             var string = OpenLayers.Util.getElement('year').value + "-" +
  29                          OpenLayers.Util.getElement('month').value + "-" +
  30                          OpenLayers.Util.getElement('day').value + "T" +
  31                          OpenLayers.Util.getElement('hour').value + ":" +
  32                          OpenLayers.Util.getElement('minute').value + ":00";
  33             ia_wms.mergeNewParams({'time':string});
  34
  35         }
  36     </script>
  37   </head>
  38   <body onload="init()">
  39      <h1 id="title"> WMS Time Example</h1>
  40         <div id="tags">
  41         </div>
  42         <p id="shortdesc">
  43             Shows the use of the layer WMS-T (time) layer</a>
  44         </p>
  45     <input size="4" type='text' id='year' value="2005" onchange="update_date()"/>-<input size="2" type="text" id="month" value="08" onchange="update_date()"/>-<input size="2" type="text" id="day" value="29" onchange="update_date()" />T<input type="text" size="2" id="hour" value="13" onchange="update_date()" />:<input type="text" size="2" id="minute" value="00" onchange="update_date()" />:00
  46     <div id="map" class="smallmap"></div>
  47     <div id="docs">
  48             WMS-T example: update the times, and the radar image will change. Uses Layer.mergeNewParams to update the date element with the strings from the input fields every time one of them is changed.
  49             The inputs below describe a timestamp: The minute increments can only be updated in units of 5.
  50     </div>
  51   </body>
  52 </html>
  53
  54
  55