[OpenLayers-Commits] r12239 - sandbox/mpriour/temporal_map/openlayers/examples

[commits-20090109 at openlayers.org]

Author: mpriour
Date: 2011-08-12 13:05:25 -0700 (Fri, 12 Aug 2011)
New Revision: 12239

Modified:
   sandbox/mpriour/temporal_map/openlayers/examples/wmst.html
Log:
testing a simple time control example by updating the older WMST example.

Modified: sandbox/mpriour/temporal_map/openlayers/examples/wmst.html
===================================================================
--- sandbox/mpriour/temporal_map/openlayers/examples/wmst.html	2011-08-12 19:24:23 UTC (rev 12238)
+++ sandbox/mpriour/temporal_map/openlayers/examples/wmst.html	2011-08-12 20:05:25 UTC (rev 12239)
@@ -19,23 +19,42 @@
             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
                 "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
                 {layers: "landsat7"});
+			
+			var last5min = new Date(Math.floor(Date.now()/3e5)*3e5);
+			var last65min = new Date(Math.floor(Date.now()/3e5)*3e5-36e5)
 
-            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"});
+            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:OpenLayers.Date.toISOString(last65min)
+			},{
+				timeInterval:[last65min,last5min],
+				timeStep:5,
+				timeUnit:OpenLayers.TimeUnit.MINUTE
+			});
 
             jpl_wms.setVisibility(false);
+			
+			timeCtl = new OpenLayers.Control.TimeManager({
+				range:ia_wms.timeInterval,
+				unit:ia_wms.timeUnit,
+				step:ia_wms.timeStep,
+				layers:[ia_wms]
+			});
+			timeCtl.events.on({'tick':update_date,scope:timeCtl});
 
             map.addLayers([ol_wms, jpl_wms, ia_wms]);
             map.addControl(new OpenLayers.Control.LayerSwitcher());
             map.zoomToExtent(new OpenLayers.Bounds(-100.898437,22.148438,-78.398437,39.726563));
+			update_date(timeCtl.currentTime);
         }
-        function update_date() {
-            var string = OpenLayers.Util.getElement('year').value + "-" +
-                         OpenLayers.Util.getElement('month').value + "-" +
-                         OpenLayers.Util.getElement('day').value + "T" +
-                         OpenLayers.Util.getElement('hour').value + ":" +
-                         OpenLayers.Util.getElement('minute').value + ":00";
-            ia_wms.mergeNewParams({'time':string});
-
+        function update_date(time) {
+            OpenLayers.Util.getElement('year').value = time.getFullYear();
+			OpenLayers.Util.getElement('month').value = time.getMonth();
+            OpenLayers.Util.getElement('day').value = time.getDate();
+            OpenLayers.Util.getElement('hour').value = time.getHours();
+            OpenLayers.Util.getElement('minute').value = time.getMinutes();
         }
     </script>
   </head>
@@ -45,9 +64,19 @@
             wmst, wms-t
         </div>
         <p id="shortdesc">
-            Shows the use of the layer WMS-T (time) layer</a>
+            Shows the use of the TimeManager control with a single simple WMS-T (time) layer<br>
+			Click on the 
         </p>
-    <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
+    <input size="4" type='text' id='year' value="" readonly="true" />-
+	<input size="2" type="text" id="month" value="" readonly="true" />-
+	<input size="2" type="text" id="day" value="" readonly="true" />T
+	<input type="text" size="2" id="hour" value="" readonly="true" />:
+	<input type="text" size="2" id="minute" value=""  readonly="true"/>:00
+	<div>
+		<button type="button" onclick="timeCtl.stop()">Stop</button>
+		&nbsp;|&nbsp;<button type="button" onclick="timeCtl.reset()">Reset</button>
+		&nbsp;|&nbsp;<button type="button" onclick="timeCtl.play()">Play</button>
+	</div>
     <div id="map" class="smallmap"></div>
     <div id="docs">
         <p>WMS-T example: update the times, and the radar image will change.