<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 800px;
height: 475px;
border: 1px solid black;
}
</style>
<script src="../openlayers/OpenLayers.js"></script>
<script src="./MyToolbar.js"></script>
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map( $('map') );
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
layer = new OpenLayers.Layer.WMS( "State", "/geoserver/wms",
{layers: 'topp:tasmania_state_boundaries',
format: 'image/png'} );
map.addLayer(layer);
layer = new OpenLayers.Layer.WMS( "Water", "/geoserver/wms",
{layers: 'topp:tasmania_water_bodies',
'transparent': true,
format: 'image/png'} );
map.addLayer(layer);
rlayer = new OpenLayers.Layer.WFS( "Roads", "/geoserver/wfs",
{typename: 'topp:tasmania_roads'},
{typename: 'tasmania_roads',
featureNS: 'http://www.openplans.org/topp',
extractAttributes: false} );
rlayer.onFeatureInsert=function(feature) { feature.style.strokeColor = "#ff0000";
feature.layer.renderer.drawGeometry(feature.geometry, feature.style); }
map.addLayer(rlayer);
layer = new OpenLayers.Layer.WFS( "Cities", "/geoserver/wfs",
{typename: 'topp:tasmania_cities'},
{typename: 'tasmania_cities',
featureNS: 'http://www.openplans.org/topp',
extractAttributes: false} );
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
// Instantiate a new Control Panel Toolbar
var p = new OpenLayers.Control.Panel({'displayClass': 'olControlEditingToolbar'});
// Add a multi-point line drawing tool tip container
df = new OpenLayers.Control.DrawFeature(rlayer,
OpenLayers.Handler.Path,
{handlerOptions: {'freehand': false}, 'displayClass': 'olControlDrawFeaturePath'});
df.featureAdded = function(feature) {feature.state = OpenLayers.State.INSERT;
feature.style['strokeColor'] = "#0000ff";
feature.layer.renderer.drawGeometry(feature.geometry, feature.style); }
// Add a single point drawing tool tip container
dp = new OpenLayers.Control.DrawFeature(layer,
OpenLayers.Handler.Point,
{handlerOptions: {'freehand': false}, 'displayClass': 'olControlDrawFeaturePoint'});
dp.featureAdded = function(feature) {var oldgeom = feature.geometry;
feature.layer.renderer.eraseGeometry(oldgeom);
feature.geometry = new OpenLayers.Geometry.MultiPoint(oldgeom);
feature.state = OpenLayers.State.INSERT;
feature.style['strokeColor'] = "#0000ff";
feature.layer.renderer.drawGeometry(feature.geometry, feature.style); }
//dz = new OpenLayers.Control.ZoomBox(layer,
// OpenLayers.Handler.Box,
// {handlerOptions: {'freehand': false}, 'displayClass': 'olControlZoomBox'});
// Add the Hand, Multi-point-line, Point tools to Controls menu
//p.addControls([ new OpenLayers.Control.Navigation(), df, dp ]);
p.addControls([ new OpenLayers.Control.Navigation(), new OpenLayers.Control.ZoomBox(), df, dp ]);
//p.addControls([ new OpenLayers.Control.Navigation(), dz, df, dp ]);
//p.addControls([ new OpenLayers.Control.DragPan(), new OpenLayers.Control.ZoomBox(), df, dp ]);
//p.addControls([ new OpenLayers.Control.NavToolbar(), df, dp ]);
//var tb = new MyToolbar(layer);
//map.addControl(tb);
map.addControl(p);
map.zoomToExtent(new OpenLayers.Bounds(145.51045,-44.0,149.0,-40.5));
}
function serialize(type, index) {
var xmls = new XMLSerializer();
var serialize = new OpenLayers.Format[type]({},map.layers[index]);
var data = serialize.write(map.layers[index].features);
$('serialize').value = xmls.serializeToString(data);
$('serialize').style.display='block';
}
</script>
</head>
<body onload="init()">
<h1>OpenLayers WFS-T demo: Tasmania cities and roads</h1>
<a href="#" onclick="map.layers[2].commit();return false">Save Roads</a> <a href="#serialize" onclick="serialize('WFS', 2)">Show Roads WFS Transaction</a><br>
<a href="#" onclick="map.layers[3].commit();return false">Save Cities</a> <a href="#serialize" onclick="serialize('WFS', 3)">Show Cities WFS Transaction</a><br />
<div id="map"></div>
<textarea style="display:none" id="serialize" cols="96" rows="10"/>
</body>
</html>