WPS OpenLayers Client

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. MetaCarta developed the initial version of OpenLayers and gave it to the public to further the use of geographic information of all kinds. OpenLayers is completely free, Open Source JavaScript, released under a BSD-style License.

OpenLayers was chosen as background library for necessary JavaScript programming, because it contains all the necessary stuff, like XML parsing, Ajax server proxy, GML parsing, etc.

Several examples are available in the PyWPS webclient directory. Following code snipplets are taken from the wps.html file. WPS.js is located in the same directory.

Note

For better JavaScript debugging, consider to use Firebug Firefox extension, which makes the life of JavaScript programmer really easier.

The map

Create the map, with WMS layer and vector layer. The vector layer can be edited

        <script src="http://openlayers.org/api/OpenLayers.js"></script>

            function init(){
                layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                        "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
    
                vlayer = new OpenLayers.Layer.Vector("Editable");
                map = new OpenLayers.Map( 'map', {
                    controls: [
                        new OpenLayers.Control.PanZoom(),
                        new OpenLayers.Control.EditingToolbar(vlayer)
                    ]
                });
                map.addLayers([layer, vlayer]);
    
                map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

Setup the WPS client

The WPS.js is part of PyWPS source, in the webclient directory. You have to copy it to the HTML file and include it.

        <script src="WPS.js"></script>
            var onWPSClicked = function() {

                // create the WPS object
                var wps = new OpenLayers.WPS("http://localhost/cgi-bin/wps",{onSucceeded: onWPSSussceeded});

                // define data inputs
                var dataInput = new OpenLayers.WPS.ComplexPut({
                    identifier:"data",
                    value:  OpenLayers.Format.GML.prototype.write(vlayer.features)
                    });
                var literalInput = new OpenLayers.WPS.LiteralPut({
                        identifier:"text",
                        value: document.getElementById("text").value
                    });

                // define data outputs
                var literalOutput = new OpenLayers.WPS.LiteralPut({
                            identifier: "text"
                        });
                var complexOutput = new OpenLayers.WPS.ComplexPut({
                            identifier: "output"
                        });

                // define the process with in- and outputs
                var returnerProcess = new OpenLayers.WPS.Process({
                        identifier: "returner",
                        inputs: [dataInput,literalInput],
                        outputs: [literalOutput, complexOutput] });

                // register process to particular wps and execute
                wps.addProcess(returnerProcess);
                wps.execute("returner");
            };

Once the process is calculated, onWPSSussceeded() is called.

            var onWPSSussceeded = function(process) {
                var text = process.getOutput("text").getValue();
                alert(text);
            };

Another way, how to obtain some informations from the server and build the client automatically is to run wps.getCapabilities and wps.describeProcess methods. All informations from the server are then stored on the client.