From PyWPS
Jump to: navigation, search

PyWPS JavaScript client (OpenLayers)

PyWPS distribution also includes a generic Javascript WPS client, which is based on OpenLayers . The client (does not show any results in the map), but it enables you, as client coder, to program a client using several WPS suport classes. The client is located in the PyWPS-source/webclient/WPS.js. Beside this file OpenLayers have to be included in the web page.

Initialization and GetCapabilities request

To initialize the WPS object, the service URL have to be known. This example can be found in file: wpsclient/01-init.html .

 // set the proxy
 OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

 // set the url
 var url = "http://foo/bar/";

 // init the client
 wps = new OpenLayers.WPS(url);

 // run get capabilities

If OpenLayers.ProxyHost looks strange, please see:

Parsing GetCapabilities response

You have to define the callback-function, that will be called, when GetCapabilities response arrives

wps = new OpenLayers.WPS(url, {onGotCapabilities: onGetCapabilities});
 * This function is called, when GetCapabilities response
 * arrived and was parsed
 function onGetCapabilities() {

 var capabilities = "<h3>"+wps.title+"</h3>";
 capabilities += "<h3>Abstract</h3>"+wps.abstract;
 capabilities += "<h3>Processes</h3><dl>";

 // for each process, get identifier, title and abstract
 for (var i = 0; i < wps.processes.length; i++) {
 var process = wps.processes[i];

 capabilities += "<dt>"+process.identifier+"</dt>";
 capabilities += "<dd>"+"<strong>"+process.title+"</strong><br />"+

 capabilities += "</dl>";

 document.getElementById("wps-result").innerHTML = capabilities;

Parsing DescribeProcess response

For calling DescribeProcess request, identifier of the process has to be known to you. You can obtain the available processes from the GetCapabilities response (described previously). Anyway, the onDescribedProcess callback-function has to be defined as parameter.

This example can be found in file: wpsclient/02-describe.html

 wps = new OpenLayers.WPS(url, {onDescribedProcess: onDescribeProcess});

 // run get capabilities

 * This function is called, when DescribeProcess response
 * arrived and was parsed
 function onDescribeProcess(process) {

 var description = "<h3>"+process.title+"</h3>";
 description += "<h3>Abstract</h3>"+process.abstract;
 description += "<h3>Inputs</h3><dl>";

 // for each input
 for (var i = 0; i < process.inputs.length; i++) {
 var input = process.inputs[i];
 description += "<dt>"+input.identifier+"</dt>";
 description += "<dd>"+"<strong>"+input.title+"</strong><br />"+
 description += "</dl>";
 description += "<h3>Outputs</h3><dl>";

 // for each input
 for (var i = 0; i < process.outputs.length; i++) {
 var output = process.outputs[i];
 description += "<dt>"+output.identifier+"</dt>";
 description += "<dd>"+"<strong>"+output.title+"</strong><br />"+
 description += "</dl>";

 document.getElementById("wps-result").innerHTML = description;

Calling Execute request

To make an Execute request, identifier, inputs and outputs of the process have to be known. You can obtain the information from the GetCapabilities and DescribeProcess response (described previously). Again a callback function has to be assigned in the onSucceeded parameter.

Defining In- and Outputs for the process 'by hand'

In this example, we will define In- and Outputs of the process "by hand", so we will not use the automatic way, via GetCapabilities and DescribeProcess.

The 'by hand' process initialization consists out of three steps:

1. Definition of process In- and Outputs

2. Definition of the Process itself

3. Adding process to WPS instance

This example can be found in wpsclient/03-execute.html

The Execute request programming is different from the examples above, first we need to create a WPS object, then a process object, assigning the process object to the WPS object. Therefore WPS service and process are decoupled.

 // WPS object
 wps = new OpenLayers.WPS(url,{onSucceeded: onExecuted});

 // define inputs of the 'dummyprocess'
var input1 = new OpenLayers.WPS.LiteralPut({identifier:"input1",value:1});
 var input2 = new OpenLayers.WPS.LiteralPut({identifier:"input2",value:2});

 // define outputs of the 'dummyprocess'
 var output1 = new OpenLayers.WPS.LiteralPut({identifier:"output1"});
 var output2 = new OpenLayers.WPS.LiteralPut({identifier:"output2"});

 // define the process and append it to OpenLayers.WPS instance
 var dummyprocess = new
 inputs: [input1, input2],
 outputs: [output1, output2]});


 // run Execute

And the onExecuted callback function:

 * This function is called, when Execute response
 * arrived and it was parsed
 function onExecuted(process) {
 var executed = "<h3>"+process.title+"</h3>";
 executed += "<h3>Abstract</h3>"+process.abstract;

 executed += "<h3>Outputs</h3><dl>";

 // for each output
 for (var i = 0; i < process.outputs.length; i++) {
 var output = process.outputs[i];
 executed += "<dt>"+output.identifier+"</dt>";
 executed += "<dd>Title: <strong>"+output.title+"</strong><br />"+
 "Abstract: "+output.abstract+"</dd>";
 executed += "<dd>"+"<strong>Value:</strong> "+
 executed += "</dl>";
 document.getElementById("wps-result").innerHTML = executed;


Notice the getValue() method from the output object.

Defining In- and Outputs for the process automatically

In this example, we will define In- and Outputs of the process automatically, using the GetCapabilities and DescribeProcess requests. This example can be found in wpsclient/04-execute-automatic.html .

 // init the client
 wps = new OpenLayers.WPS(url,{
 onDescribedProcess: onDescribeProcess,
 onSucceeded: onExecuted

 // run Execute

 * DescribeProcess and call the Execute response
 function onDescribeProcess(process) {


The rest was already defined before.

Handling vector data

A typical operation performed using OpenLayers and a WPS service, is to send data to the server and display the results directly over the map. For example consider a process that allows to generate a buffer starting from vector data and a number to use as buffer's value. From the DescribeProcess we see that those two inputs must be passed as "data" and "buffer". At this point we start with the configuration of OpenLayers:

Add vector layer used for editing and the editing toolbar control:

vlayer = new OpenLayers.Layer.Vector("Editable");
 edit = new OpenLayers.Control.EditingToolbar(vlayer);

Now create the WPS object as defined before;a bit of attention to input/output parameters because we're going to use the featues drawn by the user (vlayer) and a literaldata inserted in a HTML text box with buffer as id.

    • Input:
 var dataInput = new OpenLayers.WPS.ComplexPut({
 value: OpenLayers.Format.GML.prototype.write(vlayer.features)

 var literalInput = new OpenLayers.WPS.LiteralPut({
 value: document.getElementById("buffer").value


var complexOutput = new OpenLayers.WPS.ComplexPut({
 identifier: "output",
 asReference: "true"

Now move to the onSuceedeed function, the one executed once the process has successfully run. Basically we need to add the output file to the list of layers in the map object. OpenLayers allows to add GML directly on the map, but watch out for file too big:

var onWPSSussceeded = function(process) {
 //We need to remove the layer generated by previous instance of the script
 try {
 } catch(e) {}
 url = process.getOutput("output").value;
 rlayer = new OpenLayers.Layer.GML("Result",url);

Complete Example

A complete example can be found here [1]

--Wikiadmin 16:39, 10 January 2011 (UTC)