]> dev.renevier.net Git - syp.git/blob - openlayers/examples/wfs-protocol-transactions.html
add some margin around image
[syp.git] / openlayers / examples / wfs-protocol-transactions.html
1 <html>
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     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
6     <script src="../lib/OpenLayers.js"></script>
7     <style>
8         .customEditingToolbar {
9             float: right;
10             right: 0px;
11             height: 30px; 
12             width: 200px;
13         }
14         .customEditingToolbar div {
15             float: right;
16             margin: 5px;
17             width: 24px;
18             height: 24px;
19         }
20         .olControlNavigationItemActive { 
21             background-image: url("../theme/default/img/editing_tool_bar.png");
22             background-repeat: no-repeat;
23             background-position: -103px -23px; 
24         }
25         .olControlNavigationItemInactive { 
26             background-image: url("../theme/default/img/editing_tool_bar.png");
27             background-repeat: no-repeat;
28             background-position: -103px -0px; 
29         }
30         .olControlDrawFeaturePolygonItemInactive { 
31             background-image: url("../theme/default/img/editing_tool_bar.png");
32             background-repeat: no-repeat;
33             background-position: -26px 0px; 
34         }
35         .olControlDrawFeaturePolygonItemActive { 
36             background-image: url("../theme/default/img/editing_tool_bar.png");
37             background-repeat: no-repeat;
38             background-position: -26px -23px ;                                                                   
39         }
40         .olControlModifyFeatureItemActive { 
41             background-image: url(../theme/default/img/move_feature_on.png);
42             background-repeat: no-repeat;
43             background-position: 0px 1px;
44         }
45         .olControlModifyFeatureItemInactive { 
46             background-image: url(../theme/default/img/move_feature_off.png);
47             background-repeat: no-repeat;
48             background-position: 0px 1px;
49         }
50         .olControlDeleteFeatureItemActive { 
51             background-image: url(../theme/default/img/remove_point_on.png);
52             background-repeat: no-repeat;
53             background-position: 0px 1px;
54         }
55         .olControlDeleteFeatureItemInactive { 
56             background-image: url(../theme/default/img/remove_point_off.png);
57             background-repeat: no-repeat;
58             background-position: 0px 1px;
59         }
60     </style>
61     <script type="text/javascript">
62         var map, wfs;
63         
64         var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
65             initialize: function(layer, options) {
66                 OpenLayers.Control.prototype.initialize.apply(this, [options]);
67                 this.layer = layer;
68                 this.handler = new OpenLayers.Handler.Feature(
69                     this, layer, {click: this.clickFeature}
70                 );
71             },
72             clickFeature: function(feature) {
73                 // if feature doesn't have a fid, destroy it
74                 if(feature.fid == undefined) {
75                     this.layer.destroyFeatures([feature]);
76                 } else {
77                     feature.state = OpenLayers.State.DELETE;
78                     this.layer.events.triggerEvent("afterfeaturemodified", 
79                                                    {feature: feature});
80                     feature.renderIntent = "select";
81                     this.layer.drawFeature(feature);
82                 }
83             },
84             setMap: function(map) {
85                 this.handler.setMap(map);
86                 OpenLayers.Control.prototype.setMap.apply(this, arguments);
87             },
88             CLASS_NAME: "OpenLayers.Control.DeleteFeature"
89         });
90
91         function init() {
92             OpenLayers.ProxyHost= "proxy.cgi?url=";
93             map = new OpenLayers.Map('map', {
94                 projection: new OpenLayers.Projection("EPSG:900913"),
95                 displayProjection: new OpenLayers.Projection("EPSG:4326"),
96                 units: "m",
97                 maxResolution: 156543.0339,
98                 maxExtent: new OpenLayers.Bounds(
99                     -11593508, 5509847, -11505759, 5557774
100                 ),
101                 controls: [
102                     new OpenLayers.Control.PanZoom()
103                 ]
104             });
105             var gphy = new OpenLayers.Layer.Google(
106                 "Google Physical",
107                 {type: G_PHYSICAL_MAP, sphericalMercator: true}
108             );
109
110             var saveStrategy = new OpenLayers.Strategy.Save();
111
112             wfs = new OpenLayers.Layer.Vector("Editable Features", {
113                 strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
114                 projection: new OpenLayers.Projection("EPSG:4326"),
115                 protocol: new OpenLayers.Protocol.WFS({
116                     version: "1.1.0",
117                     srsName: "EPSG:4326",
118                     url: "http://demo.opengeo.org/geoserver/wfs",
119                     featureNS :  "http://opengeo.org",
120                     featureType: "restricted",
121                     geometryName: "the_geom",
122                     schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:restricted"
123                 })
124             }); 
125            
126             map.addLayers([gphy, wfs]);
127
128             var panel = new OpenLayers.Control.Panel(
129                 {'displayClass': 'customEditingToolbar'}
130             );
131             
132             var navigate = new OpenLayers.Control.Navigation({
133                 title: "Pan Map",
134             });
135             
136             var draw = new OpenLayers.Control.DrawFeature(
137                 wfs, OpenLayers.Handler.Polygon,
138                 {
139                     title: "Draw Feature",
140                     displayClass: "olControlDrawFeaturePolygon",
141                     handlerOptions: {multi: true}
142                 }
143             );
144             
145             var edit = new OpenLayers.Control.ModifyFeature(wfs, {
146                 title: "Modify Feature",
147                 displayClass: "olControlModifyFeature",
148             });
149
150             var del = new DeleteFeature(wfs, {title: "Delete Feature"});
151            
152             var save = new OpenLayers.Control.Button({
153                 title: "Save Changes",
154                 trigger: function() {
155                     if(edit.feature) {
156                         edit.selectControl.unselectAll();
157                     }
158                     saveStrategy.save();
159                 },
160                 displayClass: "olControlSaveFeatures"
161             });
162
163             panel.addControls([navigate, save, del, edit, draw]);
164             panel.defaultControl = navigate;
165             map.addControl(panel);
166             map.zoomToMaxExtent();
167         }
168         
169     </script>
170     </head>
171     <body onload="init()">
172     
173     <h1 id="title">WFS Transaction Example</h1>
174     
175     <div id="tags">
176     </div>
177     <p id="shortdesc">
178         Shows the use of the WFS Transactions (WFS-T).
179     </p>
180     
181     <div id="map" class="smallmap"></div>
182
183     <div id="docs">
184         <p>The WFS protocol allows for creation of new features and reading,
185         updating, or deleting of existing features.</p>
186         <p>Use the tools to create, modify, and delete (in order from left
187         to right) features.  Use the save tool (picture of a disk) to
188         save your changes.  Use the navigation tool (hand) to stop editing
189         and use the mouse for map navigation.</p>
190     </div>
191
192
193
194 </body>
195 </html>
196
197