diff options
Diffstat (limited to 'misc/openlayers/examples/getfeatureinfo-control.html')
| -rw-r--r-- | misc/openlayers/examples/getfeatureinfo-control.html | 221 |
1 files changed, 221 insertions, 0 deletions
diff --git a/misc/openlayers/examples/getfeatureinfo-control.html b/misc/openlayers/examples/getfeatureinfo-control.html new file mode 100644 index 0000000..baecd42 --- /dev/null +++ b/misc/openlayers/examples/getfeatureinfo-control.html @@ -0,0 +1,221 @@ +<!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 { + document.getElementById('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> |