diff --git a/examples/wfs-protocol-transactions.html b/examples/wfs-protocol-transactions.html index 9a783d799a..642a8f53ce 100644 --- a/examples/wfs-protocol-transactions.html +++ b/examples/wfs-protocol-transactions.html @@ -58,140 +58,32 @@ background-position: 0px 1px; } - + - -

WFS Transaction Example

- -
-
-

- Shows the use of the WFS Transactions (WFS-T). -

- -
- -
-

The WFS protocol allows for creation of new features and reading, - updating, or deleting of existing features.

-

Use the tools to create, modify, and delete (in order from left - to right) features. Use the save tool (picture of a disk) to - save your changes. Use the navigation tool (hand) to stop editing - and use the mouse for map navigation.

-
- - - - +

WFS Transaction Example

+
+

+ Shows the use of the WFS Transactions (WFS-T). +

+
+
+

+ The WFS protocol allows for creation of new features and + reading, updating, or deleting of existing features. +

+

+ Use the tools to create, modify, and delete (in order from left + to right) features. Use the save tool (picture of a disk) to + save your changes. Use the navigation tool (hand) to stop + editing and use the mouse for map navigation. +

+

+ See the + wfs-protocol-transactions.js source to see how this is done. +

+
+ diff --git a/examples/wfs-protocol-transactions.js b/examples/wfs-protocol-transactions.js new file mode 100644 index 0000000000..a9145f1b6c --- /dev/null +++ b/examples/wfs-protocol-transactions.js @@ -0,0 +1,107 @@ +var map, wfs; +OpenLayers.ProxyHost = "/proxy/?url="; + +var DeleteFeature = OpenLayers.Class(OpenLayers.Control, { + initialize: function(layer, options) { + OpenLayers.Control.prototype.initialize.apply(this, [options]); + this.layer = layer; + this.handler = new OpenLayers.Handler.Feature( + this, layer, {click: this.clickFeature} + ); + }, + clickFeature: function(feature) { + // if feature doesn't have a fid, destroy it + if(feature.fid == undefined) { + this.layer.destroyFeatures([feature]); + } else { + feature.state = OpenLayers.State.DELETE; + this.layer.events.triggerEvent("afterfeaturemodified", + {feature: feature}); + feature.renderIntent = "select"; + this.layer.drawFeature(feature); + } + }, + setMap: function(map) { + this.handler.setMap(map); + OpenLayers.Control.prototype.setMap.apply(this, arguments); + }, + CLASS_NAME: "OpenLayers.Control.DeleteFeature" +}); + +function init() { + map = new OpenLayers.Map('map', { + projection: new OpenLayers.Projection("EPSG:900913"), + displayProjection: new OpenLayers.Projection("EPSG:4326"), + units: "m", + maxResolution: 156543.0339, + maxExtent: new OpenLayers.Bounds( + -11593508, 5509847, -11505759, 5557774 + ), + controls: [ + new OpenLayers.Control.PanZoom() + ] + }); + var gphy = new OpenLayers.Layer.Google( + "Google Physical", + {type: G_PHYSICAL_MAP, sphericalMercator: true} + ); + + var saveStrategy = new OpenLayers.Strategy.Save(); + + wfs = new OpenLayers.Layer.Vector("Editable Features", { + strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy], + projection: new OpenLayers.Projection("EPSG:4326"), + protocol: new OpenLayers.Protocol.WFS({ + version: "1.1.0", + srsName: "EPSG:4326", + url: "http://demo.opengeo.org/geoserver/wfs", + featureNS : "http://opengeo.org", + featureType: "restricted", + geometryName: "the_geom", + schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:restricted" + }) + }); + + map.addLayers([gphy, wfs]); + + var panel = new OpenLayers.Control.Panel( + {'displayClass': 'customEditingToolbar'} + ); + + var navigate = new OpenLayers.Control.Navigation({ + title: "Pan Map" + }); + + var draw = new OpenLayers.Control.DrawFeature( + wfs, OpenLayers.Handler.Polygon, + { + title: "Draw Feature", + displayClass: "olControlDrawFeaturePolygon", + handlerOptions: {multi: true} + } + ); + + var edit = new OpenLayers.Control.ModifyFeature(wfs, { + title: "Modify Feature", + displayClass: "olControlModifyFeature" + }); + + var del = new DeleteFeature(wfs, {title: "Delete Feature"}); + + var save = new OpenLayers.Control.Button({ + title: "Save Changes", + trigger: function() { + if(edit.feature) { + edit.selectControl.unselectAll(); + } + saveStrategy.save(); + }, + displayClass: "olControlSaveFeatures" + }); + + panel.addControls([navigate, save, del, edit, draw]); + panel.defaultControl = navigate; + map.addControl(panel); + map.zoomToMaxExtent(); +} + diff --git a/examples/wfs-t.html b/examples/wfs-t.html deleted file mode 100644 index 9b6e745dbd..0000000000 --- a/examples/wfs-t.html +++ /dev/null @@ -1,103 +0,0 @@ - - - OpenLayers: WFS-T - - - - - - - - -

WFS Transaction Example

- -
-
-

- Shows the use the WFS layer for transactions. -

- -
- -

- This is an example of using a WFS layer type. Note that it requires a - working GeoServer install, which the OpenLayers project does not maintain; - however, if you're interested, you should be able to point this against - a default GeoServer setup without too much trouble. -

- - - - - - -