Sample: WFS-T with TinyOWS and OpenLayers¶

Install PostGIS and TinyOWS (TinyOWS Installation)
Within PostGIS, create a spatial database called ‘tinyows’

$ createdb -U postgres tinyows
$ createlang -U postgres plpgsql tinyows
$ psql -U postgres -d tinyows < `pg_config --sharedir`/contrib/postgis-1.5/postgis.sql
$ psql -U postgres -d tinyows < `pg_config --sharedir`/contrib/postgis-1.5/spatial_ref_sys.sql

Import Frida data (we will use the parks layer) into your PostGIS database

$ wget ftp://ftp.intevation.de/freegis/frida/frida-1.0.1-shp.tar.gz
$ tar xvzf frida-1.0.1-shp.tar.gz
$ cd frida-1.0.1-shp
$ shp2pgsql -s 31467 -W LATIN1 -I gruenflaechen.shp frida | psql -U postgres -d tinyows

Configure TinyOWS by editing /usr/local/tinyows/config.xml

<tinyows online_resource="http://127.0.0.1/cgi-bin/tinyows"
       schema_dir="/usr/local/tinyows/schema/">
<pg host="127.0.0.1" user="postgres" password="postgres" dbname="tinyows" port="5432"/>
<metadata name="TinyOWS Server"
          title="TinyOWS Server - WFS-T Frida Service" />
<contact name="TinyOWS Server"
         site="http://www.tinyows.org/"
         email="tinyows-users@lists.maptools.org" />
<layer retrievable="1"
       writable="1"
       ns_prefix="tows"
       ns_uri="http://www.tinyows.org/"
       name="frida"
       title="Frida Parks" />
</tinyows>

Test your installations of TinyOWS and PostGIS

./YOUR_CGI-BIN_PATH/tinyows --check
Config File:   OK
PG Connection:         OK
Available layers:
 - public.frida  -> 31467 RW

Install OpenLayers

$ wget http://openlayers.org/download/OpenLayers-2.9.tar.gz
$ tar xvzf OpenLayers-2.9.tar.gz
$ mv OpenLayers-2.9  /YOUR/SERVER/HTDOCS/

Install the OpenLayers proxy (you need the Python interpreter to make it work)

$ cp OpenLayers-2.9/examples/proxy.cgi  /YOUR/SERVER/CGI-BIN/

Add localhost (or your server IP) to proxy allowedHosts (/YOUR/SERVER/CGI-BIN/proxy.cgi)

allowedHosts = ['127.0.0.1', 'www.openlayers.org', 'openlayers.org', ... ]

Create a new file at OpenLayers-2.9/examples/tinyows_wfs-t.html

<html>
<head>
  <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script src="../lib/OpenLayers.js"></script>
  <style>
      #map {
          width: 800px;
          height: 500px;
          float: left;
          border: 1px solid #ccc;
      }
      #message {
          position: relative;
          left: 5px;
      }
      #docs {
          float: left;
      }
      .customEditingToolbar {
          float: right;
          right: 0px;
          height: 30px;
          width: 200px;
      }
      .customEditingToolbar div {
          float: right;
          margin: 5px;
          width: 24px;
          height: 24px;
      }
      .olControlNavigationItemActive {
          background-image: url("../theme/default/img/editing_tool_bar.png");
          background-repeat: no-repeat;
          background-position: -103px -23px;
      }
      .olControlNavigationItemInactive {
          background-image: url("../theme/default/img/editing_tool_bar.png");
          background-repeat: no-repeat;
          background-position: -103px -0px;
      }
      .olControlDrawFeaturePolygonItemInactive {
          background-image: url("../theme/default/img/editing_tool_bar.png");
          background-repeat: no-repeat;
          background-position: -26px 0px;
      }
      .olControlDrawFeaturePolygonItemActive {
          background-image: url("../theme/default/img/editing_tool_bar.png");
          background-repeat: no-repeat;
          background-position: -26px -23px ;
      }
      .olControlModifyFeatureItemActive {
          background-image: url(../theme/default/img/move_feature_on.png);
          background-repeat: no-repeat;
          background-position: 0px 1px;
      }
      .olControlModifyFeatureItemInactive {
          background-image: url(../theme/default/img/move_feature_off.png);
          background-repeat: no-repeat;
          background-position: 0px 1px;
      }
      .olControlDeleteFeatureItemActive {
          background-image: url(../theme/default/img/remove_point_on.png);
          background-repeat: no-repeat;
          background-position: 0px 1px;
      }
      .olControlDeleteFeatureItemInactive {
          background-image: url(../theme/default/img/remove_point_off.png);
          background-repeat: no-repeat;
          background-position: 0px 1px;
      }
  </style>
  <script src="tinyows_wfs-t.js"></script>
  </head>
  <body onload="init()">
      <h1 id="title">WFS Transaction Example, (TinyOWS ans OpenLayers)</h1>
      <div id="tags"></div>
      <p id="shortdesc">
          Shows the use of the WFS Transactions (WFS-T).
          Parks of Osnabruck (Frida).
      <br />
          Base layers is OpenStreetMap from Omniscale WMS Server.
      </p>
      <div id="map"></div>

      <div id="message"></div>
      <div id="docs">
          <p>
              The WFS protocol allows for creation of new features and
              reading, updating, or deleting of existing features.
          </p>
          <p>
              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.
          </p>
          <p>
              See the <a href="tinyows_wfs-t.js" target="_blank">
              wfs-protocol-transactions.js source</a> to see how this is done.
          </p>
      </div>
  </body>
</html>

Create a new file at OpenLayers-2.9/examples/tinyows_wfs-t.js

var map, wfs;
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?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 showMsg(szMessage) {
  document.getElementById("message").innerHTML = szMessage;
  setTimeout(
      "document.getElementById('message').innerHTML = ''",2000);
}
function showSuccessMsg(){
  showMsg("Transaction successfully completed");
};
function showFailureMsg(){
  showMsg("An error occured while operating the transaction");
};
function init() {
  map = new OpenLayers.Map('map', {
      projection: new OpenLayers.Projection("EPSG:31467"),
      units: "m",
      maxResolution: "auto",
      maxExtent: new OpenLayers.Bounds(3427000,5788000,3444000,5800000),
      controls: [
          new OpenLayers.Control.PanZoom()
      ]
  });
  var osm = new OpenLayers.Layer.WMS(
      "OSM by Omniscale WMS",
      "http://osm.omniscale.net/proxy/service",
      {layers: 'osm', format: 'image/jpeg'},
      {projection:"EPSG:31467",  units: "m", maxResolution: "auto", maxExtent: new OpenLayers.Bounds(3427000,5788000,3444000,5800000)}
  );
  var saveStrategy = new OpenLayers.Strategy.Save();
  saveStrategy.events.register("success", '', showSuccessMsg);
  saveStrategy.events.register("fail", '', showFailureMsg);
  wfs = new OpenLayers.Layer.Vector("Editable Features", {
      strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
      projection: new OpenLayers.Projection("EPSG:31467"),
      protocol: new OpenLayers.Protocol.WFS({
          version: "1.1.0",
          srsName: "EPSG:31467",
          url: "http://127.0.0.1/cgi-bin/tinyows",
          featureNS :  "http://www.tinyows.org/",
          featureType: "frida",
          geometryName: "the_geom",
          schema: "http://127.0.0.1/cgi-bin/tinyows?service=wfs&request=DescribeFeatureType&version=1.1.0&typename=tows:frida"
      })
  });
  map.addLayers([osm, 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",
          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();
}

You should obtain an image similar to the one below. Note the editor icons in the upper right corner. These icons allow you to add and edit features in the database from your web browser. Live version is at http://tinyows.org/tracdocs/demo/OpenLayers-2.9/examples/tinyows_wfs-t.html

Navigation

Sample: WFS-T with TinyOWS and OpenLayers¶

Table Of Contents

Quick search

Navigation