tinyows.html

<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <link rel="stylesheet" href="./OpenLayers-2.13.1/theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="./OpenLayers-2.13.1/examples/style.css" type="text/css" />
  <script src="./OpenLayers-2.13.1/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("./OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
          background-repeat: no-repeat;
          background-position: -103px -23px;
      }
      .olControlNavigationItemInactive {
          background-image: url("./OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
          background-repeat: no-repeat;
          background-position: -103px -0px;
      }
      .olControlDrawFeaturePolygonItemInactive {
          background-image: url("./OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
          background-repeat: no-repeat;
          background-position: -26px 0px;
      }
      .olControlDrawFeaturePolygonItemActive {
          background-image: url("./OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
          background-repeat: no-repeat;
          background-position: -26px -23px ;
      }
      .olControlModifyFeatureItemActive {
          background-image: url(./OpenLayers-2.13.1/theme/default/img/move_feature_on.png);
          background-repeat: no-repeat;
          background-position: 0px 1px;
      }
      .olControlModifyFeatureItemInactive {
          background-image: url(./OpenLayers-2.13.1/theme/default/img/move_feature_off.png);
          background-repeat: no-repeat;
          background-position: 0px 1px;
      }
      .olControlDeleteFeatureItemActive {
          background-image: url(./OpenLayers-2.13.1/theme/default/img/remove_point_on.png);
          background-repeat: no-repeat;
          background-position: 0px 1px;
      }
      .olControlDeleteFeatureItemInactive {
          background-image: url(./OpenLayers-2.13.1/theme/default/img/remove_point_off.png);
          background-repeat: no-repeat;
          background-position: 0px 1px;
      }
  </style>
  <script src="tinyows.js"></script>
  </head>
  <body onload="init()">
      <h1 id="title">WFS Transaction Example, (TinyOWS and 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.js" target="_blank">
              wfs-protocol-transactions.js source</a> to see how this is done.
          </p>
      </div>
  </body>
</html>