]> dev.renevier.net Git - syp.git/blob - openlayers/examples/getfeature-wfs.html
initial commit
[syp.git] / openlayers / examples / getfeature-wfs.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
4     <link rel="stylesheet" href="style.css" type="text/css" />
5     <title>WFS: GetFeature Example (GeoServer)</title>
6     <script src="../lib/OpenLayers.js"></script>
7     <script type="text/javascript">
8         var map, layer, select, hover, control;
9
10         function init(){
11             OpenLayers.ProxyHost= "proxy.cgi?url=";
12             map = new OpenLayers.Map('map', {
13                 controls: [
14                     new OpenLayers.Control.PanZoom(),
15                     new OpenLayers.Control.Permalink(),
16                     new OpenLayers.Control.Navigation()
17                 ]
18             });
19             layer = new OpenLayers.Layer.WMS(
20                 "States WMS/WFS",
21                 "http://demo.opengeo.org/geoserver/ows",
22                 {layers: 'topp:states', format: 'image/gif'}
23             );
24             select = new OpenLayers.Layer.Vector("Selection", {styleMap: 
25                 new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
26             });
27             hover = new OpenLayers.Layer.Vector("Hover");
28             map.addLayers([layer, hover, select]);
29             
30             control = new OpenLayers.Control.GetFeature({
31                 protocol: OpenLayers.Protocol.WFS.fromWMSLayer(layer),
32                 box: true,
33                 hover: true,
34                 multipleKey: "shiftKey",
35                 toggleKey: "ctrlKey"
36             });
37             control.events.register("featureselected", this, function(e) {
38                 select.addFeatures([e.feature]);
39             });
40             control.events.register("featureunselected", this, function(e) {
41                 select.removeFeatures([e.feature]);
42             });
43             control.events.register("hoverfeature", this, function(e) {
44                 hover.addFeatures([e.feature]);
45             });
46             control.events.register("outfeature", this, function(e) {
47                 hover.removeFeatures([e.feature]);
48             });
49             map.addControl(control);
50             control.activate();
51
52             map.setCenter(new OpenLayers.Bounds(-140.444336,25.115234,-44.438477,50.580078).getCenterLonLat(), 3);
53         }
54     </script>
55   </head>
56   <body onload="init()">
57 <h1 id="title">WFS GetFeature Example (GeoServer)</h1>
58
59 <div id="tags">
60 </div>
61
62 <p id="shortdesc">
63     Shows how to use the GetFeature control to select features from a
64     WMS layer.  Click or drag a box to select features, use the Shift key to
65     add features to the selection, use the Ctrl key to toggle a feature's
66     selected status.  Note that this control also has a hover option, which is
67     enabled in this example.  This gives you a visual feedback by loading the
68     feature underneath the mouse pointer from the WFS, but causes a lot of
69     GetFeature requests to be issued.
70 </p>
71
72 <div id="map" class="smallmap"></div>
73
74 <div id="docs"></div>
75   </body>
76 </html>
77
78
79
80 </div>