1 <html xmlns="http://www.w3.org/1999/xhtml">
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">
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;
19 // create Gears protocol
20 protocol = new OpenLayers.Protocol.SQL.Gears({
21 databaseName: "db_name",
22 tableName: "table_name",
23 saveFeatureState: false
26 if (!GearsIsSupported()) {
30 map = new OpenLayers.Map("map");
33 var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
34 "http://labs.metacarta.com/wms/vmap0",
39 // create vector layer
40 vector = new OpenLayers.Layer.Vector("Vector", {
42 strategies : [new OpenLayers.Strategy.Fixed()],
44 featuremodified: function(obj) {
51 // create modify feature control
52 modify = new OpenLayers.Control.ModifyFeature(vector);
54 // create editing panel
55 var panel = new OpenLayers.Control.Panel({
56 displayClass: "olControlEditingToolbar"
59 var navigation = new OpenLayers.Control.Navigation({
61 activate: function(obj) {
64 deactivate: function(obj) {
70 var editing = new OpenLayers.Control.DrawFeature(
71 vector, OpenLayers.Handler.Polygon, {
72 displayClass: "olControlDrawFeaturePolygon",
74 featureadded: function(obj) {
75 obj.feature.state = OpenLayers.State.INSERT;
80 panel.addControls([navigation, editing]);
81 panel.defaultControl = navigation;
83 // add controls to the map
84 map.addControl(modify);
85 map.addControl(panel);
88 map.setCenter(new OpenLayers.LonLat(5, 40), 5);
91 function displayResult(txt) {
92 if (window.resultDomElement === undefined) {
93 window.resultDomElement = OpenLayers.Util.getElement("last-result");
95 resultDomElement.innerHTML = txt;
99 function displayStatus() {
100 if (window.statusDomElement === undefined) {
101 window.statusDomElement = OpenLayers.Util.getElement("status");
108 for (i = 0, len = vector.features.length; i < len; i++) {
109 state = vector.features[i].state;
110 if (state == OpenLayers.State.INSERT) {
112 } else if (state == OpenLayers.State.UPDATE) {
114 } else if (state == OpenLayers.State.DELETE) {
118 statusDomElement.innerHTML = createCnt + " features to create, " +
119 updateCnt + " features to update, " +
120 deleteCnt + " features to delete";
123 function GearsIsSupported() {
124 if (!protocol.supported()) {
125 OpenLayers.Console.userError("You must install Gears prior to using this example");
131 function featuresWithState(state) {
134 for (i = 0, len = vector.features.length; i < len; i++) {
135 feature = vector.features[i];
136 if (feature.state == state) {
144 if (!GearsIsSupported()) {
147 var resp = protocol.read();
148 if (!resp.success()) {
149 OpenLayers.Console.error("reading from Gears DB failed");
152 vector.destroyFeatures();
153 if (!resp.features || resp.features.length <= 0) {
154 displayResult("No features to read");
157 vector.addFeatures(resp.features);
158 displayResult("features successfully read");
162 if (!GearsIsSupported()) {
166 function callback(resp) {
170 if (!resp.success()) {
171 OpenLayers.Console.error("Commiting to Gears DB failed");
175 modify.selectControl.unselectAll()
177 if (resp.reqFeatures) {
178 vector.destroyFeatures(resp.reqFeatures);
181 vector.addFeatures(resp.features);
184 if (vector.features.length > 0) {
185 protocol.commit(vector.features, {
197 displayResult("features successfully committed");
200 displayResult("no features to commit");
205 if (!GearsIsSupported()) {
208 var feature = vector.selectedFeatures[0];
210 modify.selectControl.unselectAll()
211 feature.state = OpenLayers.State.DELETE;
217 <body onload="init()">
218 <h1 id="title">Gears Protocol Example</h1>
223 Shows the usage of the Gears protocol.
226 <div class="float-left">
227 <div id="map" class="smallmap"></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>
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>
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>
245 <div style="margin-top: 30px">
246 <p>Status: <span id="status"></span></p>
247 <p>Result: <span id="last-result"></span></p>
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>