<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers WMS Feature Info Example (GeoServer)</title>
<script src="../lib/OpenLayers.js"></script>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
ul, li {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
#info {
position: absolute;
top: 6em;
left: 550px;
}
#info table td {
border:1px solid #ddd;
border-collapse: collapse;
margin: 0;
padding: 0;
font-size: 90%;
padding: .2em .1em;
background:#fff;
}
#info table th{
padding:.2em .2em;
text-transform: uppercase;
font-weight: bold;
background: #eee;
}
tr.odd td {
background:#eee;
}
table.featureInfo caption {
text-align:left;
font-size:100%;
font-weight:bold;
padding:.2em .2em;
}
</style>
<script defer="defer" type="text/javascript">
OpenLayers.ProxyHost = "proxy.cgi?url=";
var map, infocontrols, water, highlightlayer;
function load() {
map = new OpenLayers.Map('map', {
maxExtent: new OpenLayers.Bounds(143.834,-43.648,148.479,-39.573)
});
var political = new OpenLayers.Layer.WMS("State Boundaries",
"http://demo.opengeo.org/geoserver/wms",
{'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
{isBaseLayer: true}
);
var roads = new OpenLayers.Layer.WMS("Roads",
"http://demo.opengeo.org/geoserver/wms",
{'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
{isBaseLayer: false}
);
var cities = new OpenLayers.Layer.WMS("Cities",
"http://demo.opengeo.org/geoserver/wms",
{'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
{isBaseLayer: false}
);
water = new OpenLayers.Layer.WMS("Bodies of Water",
"http://demo.opengeo.org/geoserver/wms",
{'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'},
{isBaseLayer: false}
);
highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
displayInLayerSwitcher: false,
isBaseLayer: false
}
);
infoControls = {
click: new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://demo.opengeo.org/geoserver/wms',
title: 'Identify features by clicking',
layers: [water],
queryVisible: true
}),
hover: new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://demo.opengeo.org/geoserver/wms',
title: 'Identify features by clicking',
layers: [water],
hover: true,
// defining a custom format options here
formatOptions: {
typeName: 'water_bodies',
featureNS: 'http://www.openplans.org/topp'
},
queryVisible: true
})
};
map.addLayers([political, roads, cities, water, highlightLayer]);
for (var i in infoControls) {
infoControls[i].events.register("getfeatureinfo", this, showInfo);
map.addControl(infoControls[i]);
}
map.addControl(new OpenLayers.Control.LayerSwitcher());
infoControls.click.activate();
map.zoomToMaxExtent();
}
function showInfo(evt) {
if (evt.features && evt.features.length) {
highlightLayer.destroyFeatures();
highlightLayer.addFeatures(evt.features);
highlightLayer.redraw();
} else {
$('responseText').innerHTML = evt.text;
}
}
function toggleControl(element) {
for (var key in infoControls) {
var control = infoControls[key];
if (element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
function toggleFormat(element) {
for (var key in infoControls) {
var control = infoControls[key];
control.infoFormat = element.value;
}
}
function toggleLayers(element) {
for (var key in infoControls) {
var control = infoControls[key];
if (element.value == 'Specified') {
control.layers = [water];
} else {
control.layers = null;
}
}
}
// function toggle(key
</script>
</head>
<body onload="load()">
<h1 id="title">Feature Info Example</h1>
<div id="tags">
WMS, GetFeatureInfo
</div>
<p id="shortdesc">
Demonstrates the WMSGetFeatureInfo control for fetching information about a position from WMS (via GetFeatureInfo request).
</p>
<div id="info">
<h1>Tasmania</h1>
<p>Click on the map to get feature info.</p>
<div id="responseText">
</div>
</div>
<div id="map" class="smallmap"></div>
<div id="docs">
</div>
<ul id="control">
<li>
<input type="radio" name="controlType" value="click" id="click"
onclick="toggleControl(this);" checked="checked" />
<label for="click">Click</label>
</li>
<li>
<input type="radio" name="controlType" value="hover" id="hover"
onclick="toggleControl(this);" />
<label for="hover">Hover</label>
</li>
</ul>
<ul id="format">
<li>
<input type="radio" name="formatType" value="text/html" id="html"
onclick="toggleFormat(this);" checked="checked" />
<label for="html">Show HTML Description</label>
</li>
<li>
<input type="radio" name="formatType" value="application/vnd.ogc.gml" id="highlight"
onclick="toggleFormat(this);" />
<label for="highlight">Highlight Feature on Map</label>
</li>
</ul>
<ul id="layers">
<li>
<input type="radio" name="layerSelection" value="Specified" id="Specified"
onclick="toggleLayers(this);" checked="checked" />
<label for="Specified">Get water body info</label>
</li>
<li>
<input type="radio" name="layerSelection" value="Auto" id="Auto"
onclick="toggleLayers(this);" />
<label for="Auto">Get info for visible layers</label>
</li>
</ul>
</body>
</html>
