<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://localhost:8080/geoserver/style.css" type="text/css" />
<style type="text/css">
body {
margin: 1em;
}
#map {
width: 800px;
height: 475px;
border: 1px solid black;
}
</style>
<script src="http://localhost:8080/geoserver/www/openlayers/OpenLayers.js"></script>
<script type="text/javascript">
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
var map;
function init(){
map = new OpenLayers.Map('map');
var political = new OpenLayers.Layer.WMS(
"State",
"http://localhost:8080/geoserver/wms",
{layers: 'topp:tasmania_state_boundaries',
format: 'image/png'}
);
var water = new OpenLayers.Layer.WMS(
"Water",
"http://localhost:8080/geoserver/wms",
{
layers: 'topp:tasmania_water_bodies',
transparent: 'true',
format: 'image/png'
}
);
var roads = new OpenLayers.Layer.WFS(
"Roads",
"http://localhost:8080/geoserver/wfs",
{typename: 'topp:tasmania_roads'},
{
typename: 'tasmania_roads',
featureNS: 'http://www.openplans.org/topp',
extractAttributes: false
}
);
roads.style = OpenLayers.Util.applyDefaults({strokeColor: "#ff0000"},
OpenLayers.Feature.Vector.style["default"]);
var cities = new OpenLayers.Layer.WFS(
"Cities",
"http://localhost:8080/geoserver/wfs",
{typename: 'topp:tasmania_cities'},
{
typename: 'tasmania_cities',
featureNS: 'http://www.openplans.org/topp',
extractAttributes: false
}
);
cities.style = OpenLayers.Util.applyDefaults({strokeColor: "#0000ff"},
OpenLayers.Feature.Vector.style["default"]);
map.addLayers([political, water, roads, cities]);
var panel = new OpenLayers.Control.Panel(
{displayClass: 'olControlEditingToolbar'}
);
var drawLine = new OpenLayers.Control.DrawFeature(
roads, OpenLayers.Handler.Path,
{displayClass: 'olControlDrawFeaturePath'}
);
drawLine.featureAdded = function(feature) {
feature.layer.eraseFeatures([feature]);
// cast to multilinestring
feature.geometry = new OpenLayers.Geometry.MultiLineString(
feature.geometry
);
feature.style.strokeColor = "#ff0000";
feature.state = OpenLayers.State.INSERT;
feature.layer.drawFeature(feature);
}
var drawPoint = new OpenLayers.Control.DrawFeature(
cities, OpenLayers.Handler.Point,
{displayClass: 'olControlDrawFeaturePoint'}
);
drawPoint.featureAdded = function(feature) {
feature.layer.eraseFeatures([feature]);
// cast to multipoint
feature.geometry = new OpenLayers.Geometry.MultiPoint(
feature.geometry
);
feature.style.strokeColor = "#0000ff";
feature.state = OpenLayers.State.INSERT;
feature.layer.drawFeature(feature);
}
panel.addControls(
[new OpenLayers.Control.Navigation(), drawLine, drawPoint]
);
map.addControl(panel);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToExtent(
new OpenLayers.Bounds(145.51045,-44.0,149.0,-40.5)
);
}
</script>
</head>
<body onload="init()">
<h3>OpenLayers WFS-T demo: Tasmania cities and roads</h3>
<a href="#" onclick="map.layers[2].commit();return false">Save Roads</a><br />
<a href="#" onclick="map.layers[3].commit();return false">Save Cities</a>
<div id="map"></div>
</body>
</html>