<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers WPS Builder Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.olControlEditingToolbar .olControlModifyFeatureItemInactive {
background-image: url(../theme/default/img/draw_point_off.png);
.olControlEditingToolbar .olControlModifyFeatureItemActive {
background-image: url(../theme/default/img/draw_point_on.png);
textarea {
display: block;
width: 100%;
height: 3em;
label {
display: block;
.notsupported {
color: red;
button {
display: block;
margin-top: 10px;
#docs {
top: 6em;
left: 550px;
position: absolute;
margin-right: 10px;
<h1 id="title">WPS Builder Example</h1>

<div id="tags">
wps, process, advanced

<div id="shortdesc">Using WPS formats to interact with WPS</div>

<div id="docs">
<p>This example shows WPS in action by using the WPSCapabilities,
WPSDescribeProcess and WPSExecute formats. See
<a target="_blank" href="wps.js">wps.js</a> for the
source code. <b>Note: For applications using WPS, the high level
approach shown in the <a href="wps-client.html">wps-client</a> example
is recommended instead.</b></p>
<li>Select a process from the list below the map. The list is
populated with the result of a WPS GetCapabilities request, parsed
using <code>OpenLayers.Format.WPSCapabilities::read</code>.</li>
<li>Fill out the Input form. Hover over fields to get a description.
Required fields are marked with a "*".
To use a geometry from the map as input, select the geometry on the
map (using the pen symbol on the left of the toolbar) and just
click the field. The form is generated from the object returned by
<li>Click "Execute" and examine the result in the result text area.
If the result can be parsed as features, it will be displayed on
the map as well. The process data is sent to the server with the
serialized XML from <code>OpenLayers.Format.WPSExecute::write</code>,
which can use a modified
<code>OpenLayers.Format.WPSDescribeProcess</code> result object as

<div id="example" style="width:520px">
<div id="map"></div>

<select id="processes"><option>Select a process</option></select>
<p id="abstract"></p>
<div id="input"></div>
<div id="output"></div>
<script src="../lib/OpenLayers.js"></script>
<script src="wps.js"></script>
Topic revision: r1 - 01 Oct 2015, MicheleAulicino
This site is powered by FoswikiThe information you supply is used for OGC purposes only. We will never pass your contact details to any third party without your prior consent.
If you enter content here you are agreeing to the OGC privacy policy.

Copyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding OGC Public Wiki? Send feedback