4.3. Persisting FeaturesΒΆ
Persistence of vector feature data is the job of an OpenLayers.Protocol
. The WFS specification defines a protocol for reading and writing feature data. In this section, we’ll look at an example that uses an OpenLayers.Protocol.WFS
instance with a vector layer.
A full-fledged editing application involves more user interaction (and GUI elements) than is practical to demonstrate in a short example. However, we can add an OpenLayers.Control.Panel
to a map that accomplishes a few of the basic editing tasks.
Tasks
Open your text editor and paste in the text from the start of the previous section. Save this as
map.html
.OpenLayers doesn’t provide controls for deleting or saving features. The
extras
folder in this workshop includes code for those controls bundled together in a control panel. These controls are specific to editing a vector layer with multipolygon geometries, so they will work with our landmarks example. In the<head>
of yourmap.html
document, after the OpenLayers script tag, insert the following to pull in the required code and stylesheet for the controls:<link rel="stylesheet" href="extras/editing-panel.css" type="text/css"> <script src="extras/DeleteFeature.js"></script> <script src="extras/EditingPanel.js"></script>
Now we’ll give the
landmarks
layer anOpenLayers.Strategy.Save
. This strategy is designed to trigger commits on the protocol and deal with the results. Thelandmarks
layer currently has a single strategy. Modify the layer creation code to include another:var landmarks = new OpenLayers.Layer.Vector("NY Landmarks", { strategies: [ new OpenLayers.Strategy.BBOX(), new OpenLayers.Strategy.Save() ], protocol: new OpenLayers.Protocol.WFS({ version: "1.1.0", url: "/geoserver/wfs", featureType: "poly_landmarks", featureNS: "http://www.census.gov", srsName: "EPSG:4326" }) });
Finally, we’ll create the editing panel and add it to the map. Somewhere in your map initialization code after creating the
landmarks
layer, insert the following:var panel = new EditingPanel(landmarks); map.addControl(panel);
Now save your changes and load
map.html
in your browser: http://localhost:8080/ol_workshop/map.html