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&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
6 <script src="../lib/OpenLayers.js"></script>
8 .customEditingToolbar {
14 .customEditingToolbar div {
20 .olControlNavigationItemActive {
21 background-image: url("../theme/default/img/editing_tool_bar.png");
22 background-repeat: no-repeat;
23 background-position: -103px -23px;
25 .olControlNavigationItemInactive {
26 background-image: url("../theme/default/img/editing_tool_bar.png");
27 background-repeat: no-repeat;
28 background-position: -103px -0px;
30 .olControlDrawFeaturePolygonItemInactive {
31 background-image: url("../theme/default/img/editing_tool_bar.png");
32 background-repeat: no-repeat;
33 background-position: -26px 0px;
35 .olControlDrawFeaturePolygonItemActive {
36 background-image: url("../theme/default/img/editing_tool_bar.png");
37 background-repeat: no-repeat;
38 background-position: -26px -23px ;
40 .olControlModifyFeatureItemActive {
41 background-image: url(../theme/default/img/move_feature_on.png);
42 background-repeat: no-repeat;
43 background-position: 0px 1px;
45 .olControlModifyFeatureItemInactive {
46 background-image: url(../theme/default/img/move_feature_off.png);
47 background-repeat: no-repeat;
48 background-position: 0px 1px;
50 .olControlDeleteFeatureItemActive {
51 background-image: url(../theme/default/img/remove_point_on.png);
52 background-repeat: no-repeat;
53 background-position: 0px 1px;
55 .olControlDeleteFeatureItemInactive {
56 background-image: url(../theme/default/img/remove_point_off.png);
57 background-repeat: no-repeat;
58 background-position: 0px 1px;
61 <script type="text/javascript">
64 var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
65 initialize: function(layer, options) {
66 OpenLayers.Control.prototype.initialize.apply(this, [options]);
68 this.handler = new OpenLayers.Handler.Feature(
69 this, layer, {click: this.clickFeature}
72 clickFeature: function(feature) {
73 // if feature doesn't have a fid, destroy it
74 if(feature.fid == undefined) {
75 this.layer.destroyFeatures([feature]);
77 feature.state = OpenLayers.State.DELETE;
78 this.layer.events.triggerEvent("afterfeaturemodified",
80 feature.renderIntent = "select";
81 this.layer.drawFeature(feature);
84 setMap: function(map) {
85 this.handler.setMap(map);
86 OpenLayers.Control.prototype.setMap.apply(this, arguments);
88 CLASS_NAME: "OpenLayers.Control.DeleteFeature"
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"),
97 maxResolution: 156543.0339,
98 maxExtent: new OpenLayers.Bounds(
99 -11593508, 5509847, -11505759, 5557774
102 new OpenLayers.Control.PanZoom()
105 var gphy = new OpenLayers.Layer.Google(
107 {type: G_PHYSICAL_MAP, sphericalMercator: true}
110 var saveStrategy = new OpenLayers.Strategy.Save();
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({
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"
126 map.addLayers([gphy, wfs]);
128 var panel = new OpenLayers.Control.Panel(
129 {'displayClass': 'customEditingToolbar'}
132 var navigate = new OpenLayers.Control.Navigation({
136 var draw = new OpenLayers.Control.DrawFeature(
137 wfs, OpenLayers.Handler.Polygon,
139 title: "Draw Feature",
140 displayClass: "olControlDrawFeaturePolygon",
141 handlerOptions: {multi: true}
145 var edit = new OpenLayers.Control.ModifyFeature(wfs, {
146 title: "Modify Feature",
147 displayClass: "olControlModifyFeature",
150 var del = new DeleteFeature(wfs, {title: "Delete Feature"});
152 var save = new OpenLayers.Control.Button({
153 title: "Save Changes",
154 trigger: function() {
156 edit.selectControl.unselectAll();
160 displayClass: "olControlSaveFeatures"
163 panel.addControls([navigate, save, del, edit, draw]);
164 panel.defaultControl = navigate;
165 map.addControl(panel);
166 map.zoomToMaxExtent();
171 <body onload="init()">
173 <h1 id="title">WFS Transaction Example</h1>
178 Shows the use of the WFS Transactions (WFS-T).
181 <div id="map" class="smallmap"></div>
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>