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>