Show NEXRAD data in WMS Time example

examples/wms-time.html

@@ -3,8 +3,8 @@ layout: example.html
 title: WMS Time
 shortdesc: Example of smooth tile transitions when changing the time dimension of a tiled WMS layer.
 docs: >
-  Demonstrates smooth reloading of layers when changing the time dimension continously.
-tags: "wms, time, dimensions, transition"
+  Demonstrates smooth reloading of layers when changing the time dimension continously. Data shown: IEM generated CONUS composite of NWS NEXRAD WSR-88D level III base reflectivity.
+tags: "wms, time, dimensions, transition, nexrad"
 ---
 <div id="map" class="map"></div>
 <div role="group" aria-label="Animation controls">

examples/wms-time.js

@@ -1,23 +1,32 @@
 goog.require('ol.Map');
 goog.require('ol.View');
+goog.require('ol.extent');
 goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
+goog.require('ol.proj');
+goog.require('ol.source.Stamen');
 goog.require('ol.source.TileWMS');
 
-var startDate = new Date(Date.parse('2012-01-01T19:00:00Z'));
+function threeHoursAgo() {
+  return new Date(Math.round(Date.now() / 3600000) * 3600000 - 3600000 * 3);
+}
+
+var extent = ol.proj.transformExtent([-126, 24, -66, 50], 'EPSG:4326', 'EPSG:3857');
+var startDate = threeHoursAgo();
 var frameRate = 0.5; // frames per second
 var animationId = null;
 
 var layers = [
   new ol.layer.Tile({
-    source: new ol.source.OSM()
+    source: new ol.source.Stamen({
+      layer: 'terrain'
+    })
   }),
   new ol.layer.Tile({
-    extent: [-13884991, 2870341, -7455066, 6338219],
+    extent: extent,
     source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
-      url: 'http://oos.soest.hawaii.edu/thredds/wms/hioos/model/wav/ww3/' +
-          'WaveWatch_III_Global_Wave_Model_best.ncd?',
-      params: {'LAYERS': 'Thgt', 'TIME': startDate.toISOString()}
+      attributions: ['Iowa State University'],
+      url: 'http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
+      params: {'LAYERS': 'nexrad-n0r-wmst'}
     }))
   })
 ];
@@ -25,21 +34,25 @@ var map = new ol.Map({
   layers: layers,
   target: 'map',
   view: new ol.View({
-    center: [-10997148, 4569099],
+    center: ol.extent.getCenter(extent),
     zoom: 4
   })
 });
 
-var updateInfo = function() {
+function updateInfo() {
   var el = document.getElementById('info');
   el.innerHTML = startDate.toISOString();
-};
+}
 
-var setTime = function() {
-  startDate.setHours(startDate.getHours() + 1);
+function setTime() {
+  startDate.setMinutes(startDate.getMinutes() + 15);
+  if (startDate > Date.now()) {
+    startDate = threeHoursAgo();
+  }
   layers[1].getSource().updateParams({'TIME': startDate.toISOString()});
   updateInfo();
-};
+}
+setTime();
 
 var stop = function() {
   if (animationId !== null) {