]> dev.renevier.net Git - syp.git/blob - openlayers/examples/protocol-gears.html
avoid html injection in item title
[syp.git] / openlayers / examples / protocol-gears.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     <style type="text/css">
6         .float-left {
7             float: left;
8         }
9         .clear-left {
10             clear: left;
11         }
12     </style>
13     <script src="../lib/Gears/gears_init.js"></script>
14     <script src="../lib/OpenLayers.js"></script>
15     <script type="text/javascript">
16         var map, vector, protocol, modify;
17
18         function init() {
19             // create Gears protocol
20             protocol = new OpenLayers.Protocol.SQL.Gears({
21                 databaseName: "db_name",
22                 tableName: "table_name",
23                 saveFeatureState: false
24             });
25
26             if (!GearsIsSupported()) {
27                 return;
28             }
29
30             map = new OpenLayers.Map("map");
31
32             // create base layer
33             var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
34                 "http://labs.metacarta.com/wms/vmap0",
35                 {"layers": "basic"}
36             );
37             map.addLayer(layer);
38
39             // create vector layer
40             vector = new OpenLayers.Layer.Vector("Vector", {
41                 protocol: protocol,
42                 strategies : [new OpenLayers.Strategy.Fixed()],
43                 eventListeners: {
44                     featuremodified: function(obj) {
45                         displayStatus();
46                     }
47                 }
48             });
49             map.addLayer(vector);
50
51             // create modify feature control
52             modify = new OpenLayers.Control.ModifyFeature(vector);
53
54             // create editing panel
55             var panel = new OpenLayers.Control.Panel({
56                 displayClass: "olControlEditingToolbar"
57             });
58
59             var navigation = new OpenLayers.Control.Navigation({
60                 eventListeners: {
61                     activate: function(obj) {
62                         modify.activate();
63                     },
64                     deactivate: function(obj) {
65                         modify.deactivate();
66                     }
67                 }
68             });
69
70             var editing = new OpenLayers.Control.DrawFeature(
71                 vector, OpenLayers.Handler.Polygon, {
72                 displayClass: "olControlDrawFeaturePolygon",
73                 eventListeners: {
74                     featureadded: function(obj) {
75                         obj.feature.state = OpenLayers.State.INSERT;
76                         displayStatus();
77                     }
78                 }
79             });
80             panel.addControls([navigation, editing]);
81             panel.defaultControl = navigation;
82
83             // add controls to the map
84             map.addControl(modify);
85             map.addControl(panel);
86
87             // center the map
88             map.setCenter(new OpenLayers.LonLat(5, 40), 5);
89         }
90
91         function displayResult(txt) {
92             if (window.resultDomElement === undefined) {
93                 window.resultDomElement = OpenLayers.Util.getElement("last-result");
94             }
95             resultDomElement.innerHTML = txt;
96             displayStatus();
97         }
98
99         function displayStatus() {
100             if (window.statusDomElement === undefined) {
101                 window.statusDomElement = OpenLayers.Util.getElement("status");
102             }
103
104             var createCnt = 0;
105             var updateCnt = 0;
106             var deleteCnt = 0;
107             var i, len, state;
108             for (i = 0, len = vector.features.length; i < len; i++) {
109                 state = vector.features[i].state;
110                 if (state == OpenLayers.State.INSERT) {
111                     createCnt++;
112                 } else if (state == OpenLayers.State.UPDATE) {
113                     updateCnt++;
114                 } else if (state == OpenLayers.State.DELETE) {
115                     deleteCnt++;
116                 }
117             }
118             statusDomElement.innerHTML = createCnt + " features to create, " +
119                                          updateCnt + " features to update, " +
120                                          deleteCnt + " features to delete";
121         }
122
123         function GearsIsSupported() {
124             if (!protocol.supported()) {
125                 OpenLayers.Console.userError("You must install Gears prior to using this example");
126                 return false;
127             }
128             return true;
129         }
130
131         function featuresWithState(state) {
132             var list = [];
133             var i, len, feature;
134             for (i = 0, len = vector.features.length; i < len; i++) {
135                 feature = vector.features[i];
136                 if (feature.state == state) {
137                     list.push(feature);
138                 }
139             }
140             return list;
141         }
142
143         function _sync() {
144             if (!GearsIsSupported()) {
145                 return;
146             }
147             var resp = protocol.read();
148             if (!resp.success()) {
149                 OpenLayers.Console.error("reading from Gears DB failed");
150                 return;
151             }
152             vector.destroyFeatures();
153             if (!resp.features || resp.features.length <= 0) {
154                 displayResult("No features to read");
155                 return;
156             }
157             vector.addFeatures(resp.features);
158             displayResult("features successfully read");
159         }
160
161         function _commit() {
162             if (!GearsIsSupported()) {
163                 return;
164             }
165             var error = false;
166             function callback(resp) {
167                 if (error) {
168                     return;
169                 }
170                 if (!resp.success()) {
171                     OpenLayers.Console.error("Commiting to Gears DB failed");
172                     error = true;
173                     return;
174                 }
175                 modify.selectControl.unselectAll()
176
177                 if (resp.reqFeatures) {
178                     vector.destroyFeatures(resp.reqFeatures);
179                 }
180                 if (resp.features) {
181                     vector.addFeatures(resp.features);
182                 }
183             }
184             if (vector.features.length > 0) {
185                 protocol.commit(vector.features, {
186                     "create": {
187                         callback: callback
188                     },
189                     "update": {
190                         callback: callback
191                     },
192                     "delete": {
193                         callback: callback
194                     }
195                 });
196                 if (!error) {
197                     displayResult("features successfully committed");
198                 }
199             } else {
200                 displayResult("no features to commit");
201             }
202         }
203
204         function _delete() {
205             if (!GearsIsSupported()) {
206                 return;
207             }
208             var feature = vector.selectedFeatures[0];
209             if (feature) {
210                 modify.selectControl.unselectAll()
211                 feature.state = OpenLayers.State.DELETE;
212                 displayStatus();
213             }
214         }
215     </script>
216   </head>
217   <body onload="init()">
218     <h1 id="title">Gears Protocol Example</h1>
219
220     <div id="tags">
221     </div>
222     <p id="shortdesc">
223         Shows the usage of the Gears protocol.
224     </p>
225
226     <div class="float-left">
227       <div id="map" class="smallmap"></div>
228     </div>
229
230     <div>
231       <a href="javascript:_sync()">Sync</a>
232       <p>The Sync link destroys the features currently in the layer, reads
233          features from the Gears database, and adds them to the layer.
234          Uncommitted features will be lost.</p>
235
236       <a href="javascript:_commit()">Commit</a>
237       <p>The Commit link commits to the Gears database the features that are
238          marked as INSERT, UPDATE or DELETE.</p>
239
240       <a href="javascript:_delete()">Delete</a>
241       <p>The Delete link marks the selected feature as DELETE. To select a feature
242          click choose the navigation control in the editing toolbar.</p>
243     </div>
244
245     <div style="margin-top: 30px">
246       <p>Status: <span id="status"></span></p>
247       <p>Result: <span id="last-result"></span></p>
248     </div>
249
250     <div class="clear-left" id="docs">
251       <p>This example demonstrates the usage of OpenLayers Gears protocol to
252          read/create/update/delete features from/to the Gears database.
253          <a href="http://gears.google.com/">Gears</a> must obviously be installed
254          in your browser for this example to work.</p>
255     </div>
256   </body>
257 </html>