3 <title>OpenLayers WMS Feature Info Example (GeoServer)</title>
4 <script src="../lib/OpenLayers.js"></script>
5 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
6 <link rel="stylesheet" href="style.css" type="text/css" />
7 <style type="text/css">
19 border:1px solid #ddd;
20 border-collapse: collapse;
29 text-transform: uppercase;
36 table.featureInfo caption {
40 text-transform:uppercase;
46 <script defer="defer" type="text/javascript">
47 OpenLayers.ProxyHost = "proxy.cgi?url=";
49 var map, infocontrols, water, highlightlayer;
52 map = new OpenLayers.Map('map', {
53 maxExtent: new OpenLayers.Bounds(143.834,-43.648,148.479,-39.573)
56 var political = new OpenLayers.Layer.WMS("State Boundaries",
57 "http://demo.opengeo.org/geoserver/wms",
58 {'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'},
62 var roads = new OpenLayers.Layer.WMS("Roads",
63 "http://demo.opengeo.org/geoserver/wms",
64 {'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'},
68 var cities = new OpenLayers.Layer.WMS("Cities",
69 "http://demo.opengeo.org/geoserver/wms",
70 {'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'},
74 water = new OpenLayers.Layer.WMS("Bodies of Water",
75 "http://demo.opengeo.org/geoserver/wms",
76 {'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'},
80 highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
81 displayInLayerSwitcher: false,
87 click: new OpenLayers.Control.WMSGetFeatureInfo({
88 url: 'http://demo.opengeo.org/geoserver/wms',
89 title: 'Identify features by clicking',
93 hover: new OpenLayers.Control.WMSGetFeatureInfo({
94 url: 'http://demo.opengeo.org/geoserver/wms',
95 title: 'Identify features by clicking',
98 // defining a custom format options here
100 typeName: 'water_bodies',
101 featureNS: 'http://www.openplans.org/topp'
107 map.addLayers([political, roads, cities, water, highlightLayer]);
108 for (var i in infoControls) {
109 infoControls[i].events.register("getfeatureinfo", this, showInfo);
110 map.addControl(infoControls[i]);
113 map.addControl(new OpenLayers.Control.LayerSwitcher());
115 infoControls.click.activate();
116 map.zoomToMaxExtent();
119 function showInfo(evt) {
120 if (evt.features && evt.features.length) {
121 highlightLayer.destroyFeatures();
122 highlightLayer.addFeatures(evt.features);
123 highlightLayer.redraw();
125 $('responseText').innerHTML = evt.text;
129 function toggleControl(element) {
130 for (var key in infoControls) {
131 var control = infoControls[key];
132 if (element.value == key && element.checked) {
135 control.deactivate();
140 function toggleFormat(element) {
141 for (var key in infoControls) {
142 var control = infoControls[key];
143 control.infoFormat = element.value;
147 function toggleLayers(element) {
148 for (var key in infoControls) {
149 var control = infoControls[key];
150 if (element.value == 'Specified') {
151 control.layers = [water];
153 control.layers = null;
158 // function toggle(key
161 <body onload="load()">
162 <h1 id="title">Feature Info Example</h1>
164 <div id="tags"></div>
167 Demonstrates the WMSGetFeatureInfo control for fetching information about a position from WMS (via GetFeatureInfo request).
172 <p>Click on the map to get feature info.</p>
173 <div id="responseText">
176 <div id="map" class="smallmap"></div>
182 <input type="radio" name="controlType" value="click" id="click"
183 onclick="toggleControl(this);" checked="checked" />
184 <label for="click">Click</label>
187 <input type="radio" name="controlType" value="hover" id="hover"
188 onclick="toggleControl(this);" />
189 <label for="hover">Hover</label>
194 <input type="radio" name="formatType" value="text/html" id="html"
195 onclick="toggleFormat(this);" checked="checked" />
196 <label for="html">Show HTML Description</label>
199 <input type="radio" name="formatType" value="application/vnd.ogc.gml" id="highlight"
200 onclick="toggleFormat(this);" />
201 <label for="highlight">Highlight Feature on Map</label>
206 <input type="radio" name="layerSelection" value="Specified" id="Specified"
207 onclick="toggleLayers(this);" checked="checked" />
208 <label for="Specified">Get water body info</label>
211 <input type="radio" name="layerSelection" value="Auto" id="Auto"
212 onclick="toggleLayers(this);" />
213 <label for="Auto">Get info for visible layers</label>