[OpenLayers-Commits] r12338 -
sandbox/mpriour/temporal_map/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Wed Sep 7 13:34:09 EDT 2011
Author: mpriour
Date: 2011-09-07 10:34:09 -0700 (Wed, 07 Sep 2011)
New Revision: 12338
Modified:
sandbox/mpriour/temporal_map/openlayers/examples/time-control.html
Log:
Update time control example to that used in mapstory demo
Modified: sandbox/mpriour/temporal_map/openlayers/examples/time-control.html
===================================================================
--- sandbox/mpriour/temporal_map/openlayers/examples/time-control.html 2011-09-07 17:30:55 UTC (rev 12337)
+++ sandbox/mpriour/temporal_map/openlayers/examples/time-control.html 2011-09-07 17:34:09 UTC (rev 12338)
@@ -16,45 +16,65 @@
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
- var map, train_wms;
+ var map, pts_wms, line_wms, radii_wms, osm;
function init(){
- map = new OpenLayers.Map('map');
+ map = new OpenLayers.Map('map',{allOverlays:false});
- var osm = new OpenLayers.Layer.OSM();
+ osm = new OpenLayers.Layer.OSM();
- train_wms = new OpenLayers.Layer.WMS("Train Positions",
- "http://mapstory.demo.opengeo.org:8080/wms", {
- layers: "trainpositions",
+ pts_wms = new OpenLayers.Layer.WMS("Irene Centroid",
+ "http://mapstory.demo.opengeo.org:8080/geoserver/wms", {
+ layers: "irene_11_pts,irene_11_radii",
transparent: true,
format: 'image/png',
- time:OpenLayers.Date.toISOString(OpenLayers.Date.parse('2007-05-10T05:00:00Z'))
+ time:OpenLayers.Date.toISOString(OpenLayers.Date.parse('2011-08-17T12:00:00Z')),
+ srs:'EPSG:900913'
},{
- timeInterval:[OpenLayers.Date.parse('2007-05-10T05:00:00Z'),OpenLayers.Date.parse('2007-05-10T23:59:00Z')],
- timeStep:1,
- timeUnit:OpenLayers.TimeUnit.MINUTES,
+ timeInterval:[OpenLayers.Date.parse('2011-08-17T12:00:00Z'),OpenLayers.Date.parse('2011-08-29T00:00:00Z')],
+ timeStep:6,
+ timeUnit:OpenLayers.TimeUnit.HOURS,
singleTile:true,
ratio:1,
- transitionEffect:'resize'
- //buffer:0,
- //smoothRedraw:true
- });
+ transitionEffect:'resize',
+ visibility:true,
+ projection:'EPSG:900913',
+ maxExtent:osm.maxExtent.clone(),
+ maxResolution:osm.maxResolution
+ });
+ line_wms = new OpenLayers.Layer.WMS("Irene Storm Track",
+ "http://mapstory.demo.opengeo.org:8080/geoserver/wms", {
+ layers: "irene_11_lin",
+ transparent: true,
+ format: 'image/png',
+ srs:'EPSG:900913'
+ },{
+ singleTile:true,
+ ratio:1,
+ transitionEffect:'resize',
+ visibility:true,
+ projection:'EPSG:900913',
+ maxExtent:osm.maxExtent.clone(),
+ maxResolution:osm.maxResolution
+ });
+
timeCtl = new OpenLayers.Control.TimeManager({
- range:train_wms.timeInterval,
- units:train_wms.timeUnit,
- step:train_wms.timeStep,
- layers:[train_wms]
+ range:pts_wms.timeInterval,
+ units:pts_wms.timeUnit,
+ step:pts_wms.timeStep,
+ frameRate:1.3,
+ layers:[pts_wms]
});
timeCtl.events.on({
'tick': update_date,
'reset': update_date,
- 'stop':function(evt){if(evt.rangeExceeded)alert('End of time range')},
+ 'stop':timeCtl.reset,
scope: timeCtl
});
- map.addLayers([ol_wms, train_wms]);
+ map.addLayers([osm,line_wms, pts_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
- map.zoomToExtent(new OpenLayers.Bounds(-100.898437,22.148438,-78.398437,39.726563));
+ map.zoomToExtent(new OpenLayers.Bounds(-8627260.535278,1425478.519205,-3729202.941056,5496444.989113));
update_date({
object: timeCtl,
currentTime: timeCtl.currentTime
@@ -62,28 +82,20 @@
}
function update_date(evt) {
var time = this.currentTime||evt.currentTime;
- 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();
+ OpenLayers.Util.getElement('timestamp').innerHTML = time.toString();
}
</script>
</head>
<body onload="init()">
- <h1 id="title"> WMS Time Example</h1>
+ <h1 id="title"> WMS Time Example - Hurricane Irene Aug 2011</h1>
<div id="tags">
wmst, wms-t
</div>
<p id="shortdesc">
- Shows the use of the TimeManager control with a single simple WMS-T (time) layer<br>
+ Shows the use of the TimeManager control with a single simple WMS-T (time) layer served from Geoserver<br>
Click on the PLAY button to start.
</p>
- <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
+ <h2 id="timestamp"></h2>
<div>
<button type="button" onclick="timeCtl.loop=false;timeCtl.stop()">Stop</button>
| <button type="button" onclick="timeCtl.reset()">Reset</button>
@@ -91,12 +103,12 @@
| <button type="button" onclick="timeCtl.tick()">Step</button>
| <button type="button" onclick="timeCtl.play()">Play</button>
</div>
- <div id="map" class="largemap"></div>
+ <div id="map" class="tallmap"></div>
<div id="docs">
- <p>Time Control example: hit PLAY, and the trains position will change along with the<br>
+ <p>Time Control example: hit PLAY, and the storm position will change along with the<br>
time display. Uses the OpenLayers.Control.TimeManager to update the date<br>
- elements with the time of the animation. Starts at 05:00 UTC and continues until
- 23:59 UTC or until you stop it</p>
+ elements with the time of the animation. Starts at Aug 17, 2011 and continues until
+ Aug 29, 2011 or until you stop it</p>
</div>
</body>
</html>
More information about the Commits
mailing list