Table Of Contents

Previous topic

ExtJS tutorial

Next topic

Pylons tutorial

This Page

OGRS 2009 - State of the art of the creation of GIS rich internet application

This document provides information necessary to follow the lab provided during OGR 2009. Here is the associated presentation.eric

General information

  • Link to Studio instance: Instance 1
  • Detailed studio documentation: mapfish.tutorials.studio_user_guide.work_with_studio

Lab 1: Create a WMS Service

  • Create your own account with the register function
  • Login in Studio with this new account
  • In the MapFiles tab, create your own Mapfile
  • Add the layer “countries” (data were uploaded previously through the “data” tab)
  • Define your own symbology
  • When it’s ready, you can come back to the MapFile list and download the MapFile generated by Studio

Check the WMS Service


Studio takes care of the management of the OGC Webservices. So, this step is only done for the purpose of this lab.

The name of the mapfile indicates the path where it is stored on the server. You have to replace the “_” by “/” in order to know the correct path:

  • Example of MapFile name:
  • Corresponding path: /var/www/studio/private/studio/Studio/data/mapfiles/

With this information, you can check your newly created WMS by calling the GetCapabilities request: or view-source:

And, of course, you can use the GetMap request:,30,20,60&WIDTH=400&HEIGHT=300&FORMAT=image/png

Lab 2: Create a Map Viewer

Use your favourite text editor to create an HTML page:

<html xmlns="">
  <script type="text/javascript" src=""></script>

  <script type="text/javascript">
    var map;
    function init() {
      // Create an OpenLayers map
      map = new OpenLayers.Map('map');

      // Add a WMS layer distributed by Tilecache server
      map.addLayer(new OpenLayers.Layer.WMS('basic', '', {
          layers: 'basic'
      // Add a pure Tilecache layer
      // map.addLayer(new OpenLayers.Layer.TileCache('basic','', 'basic'));

      // Add mouse position and layer
      map.addControl(new OpenLayers.Control.MousePosition());

      // Zoom to max extent


 <body onload="init()">
    <div style="width: 800px; height: 600px; border: 1px solid #ddd" id="map"></div>


You can adapt the WMS path to your newly created WMS server (for example:

Using a WMS layer implies several query to MapServer per Zoom or Pan. This is not particularly performant. We recommend to use a pure tilecache layer (OpenLayers.Layer.TileCache), with pregenerated tiles.

In this lab, you have seen three ways of getting maps:

  • from a WMS server
  • from a Tilecache server. The tilecache server is able to understand a WMS query and to transfer the tiles
  • from a pregenerated tile repository

Lab 3: Create a MapFish application

In the “MapFish” tab of Studio, you can create a new MapFish applications with the following settings:

  • Configure layer by adding the countries layer and a remote WMS layer
  • Configure the data source to provide a tooltip on a countries layer
  • Configure the print module
  • ... and start the server to see your newly created MapFish

You can observe with Firebug the client server communication (for a tooltip, for example). You will see the MapFish REST protocol in action.

It is also possible to have a look at file mapfish.js which contains the generated Javascript code. You can download it from the MapFish list.

Lab 4: Test OpenScales capabilities

OpenScales demonstration

The source code can be found here: OpenScales source code