<html>
<head>
<title>Simple WMS Client</title>
<style>
body {
background-color: #eee;
}
.frame {
border: 1px solid red;
}
</style>
</head>
<body>
<form name="wms" >
<input name="request" value="GetMap" type="hidden"/> <br/>
<input name="service" value="WMS" type="hidden"/> <br/>
<table border="0">
<tr>
<td colspan="2" align="center"><b>Simple WMS Client</b></td>
<td rowspan="9" align="center" valign="center">
<img id="map" width="500" height="500" src=""/>
<div id="ImageUrl">Provide the desired values at left, then click the Update button to see the image here.</div>
</td>
</td>
<tr>
<td>Site</td>
<td><input name="Site" value="http://localhost:8008/mapguide/mapagent/mapagent.fcgi"/></td>
</tr>
<tr>
<td>Layers</td>
<td><input name="layers" value="Samples/Sheboygan/Layers/Hydrography" /></td>
</tr>
<tr>
<td>SRS</td>
<td><input name="SRS" value="EPSG:4326"/></td>
</tr>
<tr>
<td>BBOX</td>
<td><input name="BBOX" value="-87.74, 43.68, -87.69, 43.815"/></td>
</tr>
<tr>
<td>WIDTH</td>
<td><input name="width" value="500" /></td>
</tr>
<tr>
<td>HEIGHT</td>
<td><input name="height" value="500" /></td>
</tr>
<tr>
<td>FORMAT</td>
<td><input name="format" value="image/png" /></td>
</tr>
<tr>
<td>use Service=WMS</td>
<td><input name="UseServ" type="checkbox" ></td>
</tr>
<tr>
<td></td>
<td>
<input value="GetCapabilities" type="button" onclick="return(DoGetCap())"/>
<input value="GetMap" type="submit" onclick="return(DoSubmit())" />
</td>
</tr>
</table>
</form>
<script>
function DoSubmit()
{
var oImg = document.getElementById("map")
oImg.width = document.forms.wms.width.value;
oImg.height = document.forms.wms.height.value;
var sUrl = document.forms.wms.Site.value
+ "?request="+document.forms.wms.request.value
+ (document.forms.wms.UseServ.checked? ("&service="+document.forms.wms.service.value) : "")
+ "&layers="+document.forms.wms.layers.value
+ "&srs="+document.forms.wms.SRS.value
+ "&bbox="+(document.forms.wms.BBOX.value+"").replace(/ /g,'')
+ "&width="+document.forms.wms.width.value
+ "&height="+document.forms.wms.height.value
+ "&format="+document.forms.wms.format.value
document.getElementById("ImageUrl").innerHTML = "This is the URL needed to create the map you requested. (Click the link to open just the map in a new window.)<br/><a href='"+sUrl+"' target='_new'>" + sUrl + "</a>"
oImg.src = sUrl
return false;
}
function DoGetCap()
{
var sUrl = document.forms.wms.Site.value
+ "?request=GetCapabilities"
+ "&service="+document.forms.wms.service.value
window.open(sUrl)
}
</script>
</body>
</html>