Files
openlayers/examples/wmst.html
crschmidt 10907f2880 In order to make it more clear that users are required to have the theme/
directory to deploy when depending on features which use CSS, and make it clear
how to override the CSS in OpenLayers, include <link rel> ags in all examples.
(Closes #884)  


git-svn-id: http://svn.openlayers.org/trunk/openlayers@6145 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2008-02-08 22:19:28 +00:00

61 lines
2.7 KiB
HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, ia_wms;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
"http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"});
ia_wms = new OpenLayers.Layer.WMS("Nexrad","http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?",{layers:"nexrad-n0r-wmst",transparent:true,format:'image/png',time:"2005-08-29T13:00:00Z"});
jpl_wms.setVisibility(false);
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));
}
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});
}
</script>
</head>
<body onload="init()">
<h1 id="title"> WMS Time Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Shows the use of the layer WMS-T (time) layer</a>
</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
<div id="map"></div>
<div id="docs">
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.
The inputs below describe a timestamp: The minute increments can only be updated in units of 5.
</div>
</body>
</html>