]> dev.renevier.net Git - syp.git/blob - openlayers/examples/getfeatureinfo-control.html
forbird creation or deletion of item; forbids adding or deleting an image
[syp.git] / 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>