Ignore:
Timestamp:
Jul 15, 2011, 8:03:05 PM (13 years ago)
Author:
jmckenna
Message:

fix formatting of workshop files

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/docs/workshop/2010/building_wps_client_using_ol.txt

    r256 r262  
    22
    33Building a WPS client using OpenLayers
    4 ###############################
     4######################################
    55
    66.. contents:: Table of Contents
     
    88    :backlinks: top
    99
    10 The next step of our workshop is to connect to the OGR Services we have created from an OpenLayers map. This will allow to apply single or multiple geometries processes on user-selected polygons and to display the new generated geometries.
     10The next step of our workshop is to connect to the OGR Services we have created
     11from an OpenLayers map. This will allow to apply single or multiple geometries
     12processes on user-selected polygons and to display the new generated geometries.
    1113
    1214Creating a simple map showing the dataset as WMS
    13 ******************************************************
    14 
    15 OpenLayers is also included in OSGeoLive default distribution, so it is convenient to use it for our needs. Please open ``/var/www/zoo-ogr.html`` using your favorite text editor and paste the following HTML snippet:
     15************************************************
     16
     17OpenLayers is also included in OSGeoLive default distribution, so it is convenient
     18to use it for our needs. Please open ``/var/www/zoo-ogr.html`` using your favorite
     19text editor and paste the following HTML snippet:
    1620
    1721.. code-block:: guess
     
    3236    </html>
    3337
    34 The following JavaScript code must then be added in a ``<script></script>`` section within the ``<head>`` one. This will setup a map showing the japanese regions data as WMS.
     38The following JavaScript code must then be added in a ``<script></script>`` section within the
     39``<head>`` one. This will setup a map showing the japanese regions data as WMS.
    3540
    3641.. code-block:: guess
     
    6570    }
    6671
    67 Once done, please save your HTML file as ``zoo-ogr.html`` in your workshop directory, then copy it in ``/var/www`` and visualize it with your favorite Web browser using this link :  ``http://localhost/zoo-ogr.html``. You should obtain a map centered on the Japan with the WMS layer activated.
     72Once done, please save your HTML file as ``zoo-ogr.html`` in your workshop directory,
     73then copy it in ``/var/www`` and visualize it with your favorite Web browser using this link : 
     74``http://localhost/zoo-ogr.html``. You should obtain a map centered on the Japan with the WMS layer activated.
    6875
    6976.. image:: ./images/OL-JP-1.png
     
    7380
    7481Fetching the data layer as WFS and adding selection controls
    75 ****************************************************************
    76 
    77 Before accessing the displayed data via WFS, you first have to create new vector layers dedicated to host the several interactions we are going to create. Please add the following lines within the ``init()`` function, and do not forget to add the newly created layer in the map.addLayers method:
     82************************************************************
     83
     84Before accessing the displayed data via WFS, you first have to create new vector layers
     85dedicated to host the several interactions we are going to create. Please add the following
     86lines within the ``init()`` function, and do not forget to add the newly created layer in
     87the map.addLayers method:
    7888
    7989.. code-block:: guess
     
    96106    map.addLayers([layer, select, hover, multi]);
    97107
    98 Then, you can now access the data by creating new controls to select polygons, as the following. Please note that ``OpenLayers.Protocol.WFS.fromWMSLayer`` is used to access geometries and that several state of selection are declared and append to the control variable.
     108Then, you can now access the data by creating new controls to select polygons, as the
     109following. Please note that ``OpenLayers.Protocol.WFS.fromWMSLayer`` is used to access
     110geometries and that several state of selection are declared and append to the control variable.
    99111
    100112.. code-block:: guess
     
    122134    control.activate();
    123135
    124 Please save your HTML file again. You should now be able to select a polygon only by clicking on it. The selected polygon should appear in blue color.
     136Please save your HTML file again. You should now be able to select a polygon only by
     137clicking on it. The selected polygon should appear in blue color.
    125138
    126139.. image:: ./images/OL-JP-2.png
     
    130143
    131144Calling the single geometry services from JavaScript
    132 *******************************************************
    133 
    134 Now that everything is setup, we can go on and call our OGR ZOO services with JavaScript. Please add the following lines after the ``init()`` function, which will call the single geometry processes. You can notice that we use a specific ``parseMapServerId`` function which let us remove the unecessary white space returned as fid value.
     145****************************************************
     146
     147Now that everything is setup, we can go on and call our OGR ZOO services with JavaScript.
     148Please add the following lines after the ``init()`` function, which will call the single
     149geometry processes. You can notice that we use a specific ``parseMapServerId`` function
     150which let us remove the unecessary white space returned as fid value.
    135151
    136152.. code-block:: guess
     
    175191
    176192
    177 Then, some specific buttons must be added in the HTML, in order to be able to call the different processes we just declared. You can add them on top of the map by writing the following lines before the ``<div id="map"></div>``.
     193Then, some specific buttons must be added in the HTML, in order to be able to call
     194the different processes we just declared. You can add them on top of the map by writing
     195the following lines before the ``<div id="map"></div>``.
    178196
    179197.. code-block:: guess
     
    198216    </div>
    199217
    200 Save your HTML file again. You should now be able to select a polygon and to launch a Buffer, ConvexHull, Boundary or Centroid on it by clicking one of the button. The result of the process should appear as GeoJSON layer on the map, in orange color.
     218Save your HTML file again. You should now be able to select a polygon and to launch a Buffer,
     219ConvexHull, Boundary or Centroid on it by clicking one of the button. The result of the
     220process should appear as GeoJSON layer on the map, in orange color.
    201221
    202222.. image:: ./images/OL-JP-3.png
     
    206226
    207227Calling the multiples geometries processes from JavaScript
    208 **************************************************************
    209 
    210 Using the same technique, you can now write a function dedicated to the multiple geometries processes. Please add the following lines after the ``simpleProcessing()`` function, we will guide you during the exercise in section 5 on how to create such a function.
     228**********************************************************
     229
     230Using the same technique, you can now write a function dedicated to the multiple geometries
     231processes. Please add the following lines after the ``simpleProcessing()`` function, we will
     232guide you during the exercise in section 5 on how to create such a function.
    211233
    212234.. code-block:: guess
     
    261283    }
    262284
    263 Note that this time we didn't use the GET method to request the ZOO Kernel but a XML POST. We did that because if you use the GET method you will get error due to the HTTP GET method limitation based on the length of your request. Using JSON string representing the geometry will make your request longer.
    264 
    265 Once you get the functions to call your multiple geometries processes, you' must add some buttons to fire the request call. Here is the HTML code to add to your current ``zoo-ogr.html`` file :
     285Note that this time we didn't use the GET method to request the ZOO Kernel but a XML POST.
     286We did that because if you use the GET method you will get error due to the HTTP GET method
     287limitation based on the length of your request. Using JSON string representing the geometry
     288will make your request longer.
     289
     290Once you get the functions to call your multiple geometries processes, you' must add some
     291buttons to fire the request call. Here is the HTML code to add to your current ``zoo-ogr.html`` file :
    266292
    267293.. code-block:: guess
     
    283309    </ul>
    284310
    285 Please reload the page. You should then be able to run your multiple geometries services and you should get results displayed in red as shown by the following screenshots :
     311Please reload the page. You should then be able to run your multiple geometries services and
     312you should get results displayed in red as shown by the following screenshots :
    286313
    287314
     
    299326   :height: 140px
    300327   
    301 It seems that something is missing in your Services Provider to get the same results … The multiple geometries Services ! This is what we are going to do together in the next section.
     328It seems that something is missing in your Services Provider to get the same results …
     329The multiple geometries Services ! This is what we are going to do together in the next section.
Note: See TracChangeset for help on using the changeset viewer.

Search

Context Navigation

ZOO Sponsors

http://www.zoo-project.org/trac/chrome/site/img/geolabs-logo.pnghttp://www.zoo-project.org/trac/chrome/site/img/neogeo-logo.png http://www.zoo-project.org/trac/chrome/site/img/apptech-logo.png http://www.zoo-project.org/trac/chrome/site/img/3liz-logo.png http://www.zoo-project.org/trac/chrome/site/img/gateway-logo.png

Become a sponsor !

Knowledge partners

http://www.zoo-project.org/trac/chrome/site/img/ocu-logo.png http://www.zoo-project.org/trac/chrome/site/img/gucas-logo.png http://www.zoo-project.org/trac/chrome/site/img/polimi-logo.png http://www.zoo-project.org/trac/chrome/site/img/fem-logo.png http://www.zoo-project.org/trac/chrome/site/img/supsi-logo.png http://www.zoo-project.org/trac/chrome/site/img/cumtb-logo.png

Become a knowledge partner

Related links

http://zoo-project.org/img/ogclogo.png http://zoo-project.org/img/osgeologo.png