openlayers/examples/getfeatureinfo-control.html

   1 <html>
   2   <head>
   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">
   8         ul, li {
   9             padding-left: 0px;
  10             margin-left: 0px;
  11             list-style: none;
  12         }
  13         #info {
  14             position: absolute;
  15             top: 6em;
  16             left: 550px;
  17         }
  18         #info table td {
  19             border:1px solid #ddd;
  20             border-collapse: collapse;
  21             margin: 0;
  22             padding: 0;
  23             font-size: 90%;
  24             padding: .2em .1em;
  25             background:#fff;
  26         }
  27         #info table th{
  28             padding:.2em .2em;
  29             text-transform: uppercase;
  30             font-weight: bold;
  31             background: #eee;
  32         }
  33         tr.odd td {
  34             background:#eee;
  35         }
  36         table.featureInfo caption {
  37             text-align:left;
  38             font-size:100%;
  39             font-weight:bold;
  40             text-transform:uppercase;
  41             padding:.2em .2em;
  42         }
  43
  44
  45     </style>
  46   <script defer="defer" type="text/javascript">
  47     OpenLayers.ProxyHost = "proxy.cgi?url=";
  48
  49     var map, infocontrols, water, highlightlayer;
  50
  51     function load() {
  52         map = new OpenLayers.Map('map', {
  53             maxExtent: new OpenLayers.Bounds(143.834,-43.648,148.479,-39.573)
  54         });
  55
  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'},
  59             {isBaseLayer: true}
  60         );
  61
  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'},
  65             {isBaseLayer: false}
  66         );
  67
  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'},
  71             {isBaseLayer: false}
  72         );
  73
  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'},
  77             {isBaseLayer: false}
  78         );
  79
  80         highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
  81             displayInLayerSwitcher: false,
  82             isBaseLayer: false
  83             }
  84         );
  85
  86         infoControls = {
  87             click: new OpenLayers.Control.WMSGetFeatureInfo({
  88                 url: 'http://demo.opengeo.org/geoserver/wms',
  89                 title: 'Identify features by clicking',
  90                 layers: [water],
  91                 queryVisible: true
  92             }),
  93             hover: new OpenLayers.Control.WMSGetFeatureInfo({
  94                 url: 'http://demo.opengeo.org/geoserver/wms',
  95                 title: 'Identify features by clicking',
  96                 layers: [water],
  97                 hover: true,
  98                 // defining a custom format options here
  99                 formatOptions: {
 100                     typeName: 'water_bodies',
 101                     featureNS: 'http://www.openplans.org/topp'
 102                 },
 103                 queryVisible: true
 104             })
 105         }
 106
 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]);
 111         }
 112
 113         map.addControl(new OpenLayers.Control.LayerSwitcher());
 114
 115         infoControls.click.activate();
 116         map.zoomToMaxExtent();
 117     }
 118
 119     function showInfo(evt) {
 120         if (evt.features && evt.features.length) {
 121              highlightLayer.destroyFeatures();
 122              highlightLayer.addFeatures(evt.features);
 123              highlightLayer.redraw();
 124         } else {
 125             $('responseText').innerHTML = evt.text;
 126         }
 127     }
 128
 129     function toggleControl(element) {
 130         for (var key in infoControls) {
 131             var control = infoControls[key];
 132             if (element.value == key && element.checked) {
 133                 control.activate();
 134             } else {
 135                 control.deactivate();
 136             }
 137         }
 138     }
 139
 140     function toggleFormat(element) {
 141         for (var key in infoControls) {
 142             var control = infoControls[key];
 143             control.infoFormat = element.value;
 144         }
 145     }
 146
 147     function toggleLayers(element) {
 148         for (var key in infoControls) {
 149             var control = infoControls[key];
 150             if (element.value == 'Specified') {
 151                 control.layers = [water];
 152             } else {
 153                 control.layers = null;
 154             }
 155         }
 156     }
 157
 158     // function toggle(key
 159   </script>
 160   </head>
 161   <body onload="load()">
 162       <h1 id="title">Feature Info Example</h1>
 163
 164       <div id="tags"></div>
 165
 166       <p id="shortdesc">
 167         Demonstrates the WMSGetFeatureInfo control for fetching information about a position from WMS (via GetFeatureInfo request).
 168       </p>
 169
 170     <div id="info">
 171         <h1>Tasmania</h1>
 172         <p>Click on the map to get feature info.</p>
 173         <div id="responseText">
 174         </div>
 175     </div>
 176       <div id="map" class="smallmap"></div>
 177
 178     <div id="docs">
 179     </div>
 180         <ul id="control">
 181             <li>
 182                 <input type="radio" name="controlType" value="click" id="click"
 183                        onclick="toggleControl(this);" checked="checked" />
 184                 <label for="click">Click</label>
 185             </li>
 186             <li>
 187                 <input type="radio" name="controlType" value="hover" id="hover"
 188                        onclick="toggleControl(this);" />
 189                 <label for="hover">Hover</label>
 190             </li>
 191         </ul>
 192         <ul id="format">
 193             <li>
 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>
 197             </li>
 198             <li>
 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>
 202             </li>
 203         </ul>
 204         <ul id="layers">
 205             <li>
 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>
 209             </li>
 210             <li>
 211                 <input type="radio" name="layerSelection" value="Auto" id="Auto"
 212                        onclick="toggleLayers(this);" />
 213                 <label for="Auto">Get info for visible layers</label>
 214             </li>
 215         </ul>
 216   </body>
 217 </html>