Application Development in Web Mapping 7. Web Mapping Application László Kottyán

Created by XMLmind XSL-FO Converter.

Application Development in Web Mapping 7.: Web Mapping Application László Kottyán Lector: Antal Guszlev This module was created within TÁMOP - 4.1.2-08/1/A-2009-0027 "Tananyagfejlesztéssel a GEO-ért" ("Educational material development for GEO") project. The project was funded by the European Union and the Hungarian Government to the amount of HUF 44,706,488. v 1.0 Publication date 2010 Copyright © 2010 University of West Hungary Faculty of Geoinformatics Abstract In Module 7 we will connect to szfv_osm_db PostgreSQL database (See Module 2) and create a mapping application for displaying, creating and modifying geocaches top of on OpenStreetMap basemap. On client-side we will work with MapFish, Ext JS and OpenLayers. On server-side we will use Rails and PostgreSQL with PostGIS extension. The data will be served in GeoJSON format for the client. The right to this intellectual property is protected by the 1999/LXXVI copyright law. Any unauthorized use of this material is prohibited. No part of this product may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage and retrieval system without express written permission from the author/publisher.

Created by XMLmind XSL-FO Converter.

Table of Contents 7. Web Mapping Application ............................................................................................................. 1 1. 7.1 Introduction ..................................................................................................................... 1 2. 7.2 Installing MapFish .......................................................................................................... 1 3. 7.3 Database modification ..................................................................................................... 2 4. 7.4 Generating MapFish resource ......................................................................................... 2 5. 7.5 Creating the mapping client ............................................................................................ 4 5.1. 7.5.1 Client settings .................................................................................................. 4 5.2. 7.5.2 User interface ................................................................................................... 5 5.3. 7.5.3 Creating Layers ................................................................................................ 6 5.3.1. 7.5.3.1 East region ........................................................................................ 8 5.3.2. 7.5.3.2 Center region .................................................................................... 9 5.3.3. 7.5.3.3 West region .................................................................................... 10 5.3.4. 7.5.3.4 Body .............................................................................................. 11 6. 7.6 Source code ................................................................................................................... 12

iii Created by XMLmind XSL-FO Converter.

Chapter 7. Web Mapping Application 1. 7.1 Introduction MapFish is a framework for developing rich web mapping applications. It is based on Pylons 1 (a Python2 MVC web framework) and uses JavaScript tools: Ext JS3, GeoExt4 and OpenLayers5. Ext JS is a JavaScript library for building Rich Internet Applications. OpenLayers is a JavaScript mapping client tool. GeoExt combines Ext JS and OpenLayers for developing desktop-like web mapping application. MapFish supports all the OGC standards which are supported by OpenLayers. On server-side Mapsfish provides model representation of PostgreSQL/PostGIS database and a RESTful protocol for creating, reading, updating, deleting features. MapFish server has a Ruby on Rails implementation, MapFish plugin and gem, which makes it possible to create MapFish application on Rails. On client-side MapFish provides widgets for GIS functions, such as layer tree, feature editing, print tool. In Module 7 we will connect to szfv_osm_db PostgreSQL database (See Module 2) and create a mapping application for displaying, creating and modifying geocaches top of on OpenStreetMap basemap. On client-side we will work with MapFish, Ext JS and OpenLayers. On server-side we will use Rails and PostgreSQL with PostGIS extension. The data will be served in GeoJSON6 format for the client. You can read more about: • PostgreSQL in Module 2, • OpenLayers in Module 4 and Module 5, • OGC services in Module 3 and Module 5, • Ruby on Rails in Module 6.

2. 7.2 Installing MapFish We use Rails 2.3.5 (for installation steps see Module 6) with MapFish plugin 1.3.5. for the example application. The example application was tested on Ubuntu 10.04. Let's start the development with creating a MapFish project: rails --database=postgresql Geocaching cd Geocaching

Install the MapFish plugin7: ruby script/plugin install http://www.mapfish.org/svn/mapfish/implementations/rails-plugin/mapfish/trunk

Install MapFish client: rake mapfish:install_client

Pylons: http://pylonshq.com/ Python: http://www.python.org/ 3 Ext JS: http://www.sencha.com/products/extjs/ 4 GeoExt: http://www.geoext.org/ 5 OpenLayers: http://www.openlayers.org/ 6 GeoJSON: http://geojson.org/ 7 Developer Guide - Ruby on Rails Server: http://www.mapfish.org/doc/implementations/rails.html 1 2

1 Created by XMLmind XSL-FO Converter.

Web Mapping Application

Some additional extensions are necessary: sudo gem install GeoRuby ruby script/plugin install git://github.com/fragility/spatial_adapter.git sudo gem install POpen4 --source http://gemcutter.org

After the installation you should have some folder in public folder: • mfbase • build • examples • demos You can also find some images and HTML files here.

3. 7.3 Database modification Before setting up the database connection, we improve the geocache and walk tables in szfv_osm_db adding primary keys and description fields. You can do these modifications in pgAdmin III. If you need help, read pgAdmin documentation. Make sure that PostgreSQL server is running. Steps: 1. Rename the id fields of tables to name fields. 2. Add description fields with text type. 3. Add id fields with serial type. Serial will number the records automatically even if the records have data. It is good for primary key. 4. Set id fields to primary keys.

For the appropriate communication with tables, open geometry_columns table in szfv_osm_db and add two definition records here. If it is not set, the web application will have problem to handle geometries.

The oid value is given automatically after you saved the table.

4. 7.4 Generating MapFish resource In Geocaching Rails application, open config/database.yml and set the database connection properties:

2 Created by XMLmind XSL-FO Converter.

Web Mapping Application

Resource generation, like scaffolding, produces controller and model files. We have an existing database, so we don't need migration files. Type: ruby script/generate mapfish_resource --skip-migration Geocache ruby script/generate mapfish_resource --skip-migration Walk

Open the generated model files from app/models and add set_table_name and set_primary_key methods with the appropriate values:

The generator script set two routes in config/routes.rb:

In app/controllers folder you can find the generated controllers with index, show, create, update and destroy methods. The methods renders table records to GeoJSON format. To access GeoJSON data on clientside, we can use MapFish Protocol8.

8

MapFish Protocol: http://trac.mapfish.org/trac/mapfish/wiki/MapFishProtocol

3 Created by XMLmind XSL-FO Converter.

Web Mapping Application

In controller The SRID constant gets value from szfv_osm_db geometry_column table. It was set in Section 7.3. Start the server and open http://localhost:3000/geocaches or http://localhost/walks and you should get GeoJSON outputs, rendered by index methods.

If you see the output, the server-side of the application works properly.

5. 7.5 Creating the mapping client The client is written in JavaScript, mainly. You can place all the JavaScript content in public/javascripts folder and the HTML content in views folder. For production use, you should build and install the compressed runtime libraries: rake mapfish:build_scripts rake mapfish:copy_scripts

Now, in development mode we will write the client part of the application to a HTML file in public folder. In the following sections, the client-side content is explained.

5.1. 7.5.1 Client settings Create public/geocaching.html and type some references to JavaScript files and set some style settings (line 1 -30):

4 Created by XMLmind XSL-FO Converter.

Web Mapping Application

In examples/exsamples.js, there are some important configuration settings. SERVER_BASE_URL is a constant with the root url to the MapFish web service. If it is empty, it will refer to http://localhost:3000 in development environment.

Mapfish Protocol uses this URL to access GeoJSON data.

5.2. 7.5.2 User interface The main user interface of the application is a panel-like component: Viewport container. A viewport has regions: North, South, East, West and Center.

We will use: • North to display an application title (line 104, 181). • West to display MapFish LayerTree (line 153) and Recenter (line 159) widgets.

5 Created by XMLmind XSL-FO Converter.

Web Mapping Application

• East to display MapFish FeatureEditingPanel (line 118) widget. • Center to display GeoExt.MapPanel with OpenLayers content (line 128 -133). Line numbers refer to the contents of the client file (geocaching.html).

5.3. 7.5.3 Creating Layers The main application is in an Ext function (line 34). For the layers we use OpenLayers, setting some controls and the projection for OpenLayers map (line 36 - 44).

There is an OSM layer as base layer (line 46). Geocaches (line 47 - 51) and Walks (line 52 - 56) are set as GML layers with GeoJSON format.

After adding the layers to map (line 57), layers will display on the West region of the user interface in MapFish LayerTree widget (line 149 - 155) and on Center region in the OpenLayers viewer (line 125 - 134).

6 Created by XMLmind XSL-FO Converter.

Web Mapping Application

The main user interface, the Ext JS Viewport container contains all the mapping elements (MapFish widgets and GeoExt.MapPanel with OpenLayers map). Viewport settings begin from line 99. We need some configuration (line 58 - 98) for editing features in MapFish FeatureEditingPanel widget. The next configurations works independently on the added Geocaches and Walks GML layers (line 47 - 57).

In layerConfig we set a points layer (line 59 -77) which have name, protocol, url and featuretypes. Url refers to the source GeoJSON data from Geocache table. The other parameters set the displaying data in FeatureEditingPanel. The lines layers configuration displays the walks in editing panel.

7 Created by XMLmind XSL-FO Converter.

Web Mapping Application

The Ext.Viewport settings (line 99 -174) contain the displaying elements for each region.

5.3.1. 7.5.3.1 East region East region (line 108 - 124) has a complex editing widget.

With Import button the selected layer features are loaded to the map from GeoJSON dataset. With modification, new feature and delete buttons the features can be edited, added and deleted.

8 Created by XMLmind XSL-FO Converter.

Web Mapping Application

If features are added or edited there are active form inputs for typing attribute data.

With Commit button the appropriate controller methods are called by MapFish Protocol and the database is changed.

5.3.2. 7.5.3.2 Center region Center region contains a GeoExt.MapPanel (line 128) with OpenLayers OSM layer. The center of the layer is given by WGS 84 coordinates (EPSG 4326) and transformed to Spherical Mercator projection 9 (EPSG 900913) because of the projection of OpenStreetMap.

9

Spherical Mercator: http://docs.openlayers.org/library/spherical_mercator.html

9 Created by XMLmind XSL-FO Converter.

Web Mapping Application

5.3.3. 7.5.3.3 West region West region displays a layer tree element (line 149 - 155) which contains the added layers (line 57).

OSM is the base layer always displays in the background. Geocaches and Walks layers can be displayed if checkboxes are selected.

The West region contains an additional element, the Recenter widget.

10 Created by XMLmind XSL-FO Converter.

Web Mapping Application

Adding the coordinate values, setting the scale the map can be recentered.

5.3.4. 7.5.3.4 Body The HTML contains div tags displaying additional elements.

11 Created by XMLmind XSL-FO Converter.

Web Mapping Application

The application is ready to use. Start your server and try to manipulate data on map.

6. 7.6 Source code The full source code of the client is provided here: Geocaching example (Mapfish - Rails - PostgreSQL/PostGIS OpenStreetMap) html, body { font:normal 12px verdana; margin: 0; padding:0; } ul.list { list-style-type: disc; font-size: 11px; padding: 0 0 0 16px; } /* change the modal window z-index so that the combobox of the editing panel is still active when the attributes form is disabled */ .ext-el-mask { z-index: 10999; } // reference local blank image Ext.BLANK_IMAGE_URL = 'mfbase/ext/resources/images/default/s.gif'; Ext.onReady(function() { Ext.QuickTips.init(); var options = { controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoom(), new OpenLayers.Control.ScaleLine(), new OpenLayers.Control.MousePosition() ],

12 Created by XMLmind XSL-FO Converter.

Web Mapping Application

projection: "EPSG:900913" }; var map = new OpenLayers.Map("map", options); var osm = new OpenLayers.Layer.OSM("OSM"); var geocaches = new OpenLayers.Layer.GML("Geocaches", "http://localhost:3000/geocaches", { format: OpenLayers.Format.GeoJSON }); var walks = new OpenLayers.Layer.GML("Walks", "http://localhost:3000/walks", { format: OpenLayers.Format.GeoJSON }); map.addLayers([osm, geocaches, walks]); var layerConfig = { points: { text: 'Geocaches', protocol: new mapfish.Protocol.MapFish({ url: mapfish.Util.formatURL( mapfish.SERVER_BASE_URL + 'geocaches' ) }), featuretypes: { geometry: { type: OpenLayers.Geometry.Point }, properties: [ new mapfish.widgets.editing.StringProperty( {name: 'name', showInGrid: true} ), new mapfish.widgets.editing.TextProperty( {name: 'description', showInGrid: true} ) ] } }, lines: { text: 'Walks', protocol: new mapfish.Protocol.MapFish({ url: mapfish.Util.formatURL( mapfish.SERVER_BASE_URL + 'walks' ) }), featuretypes: { geometry: { type: OpenLayers.Geometry.LineString }, properties: [ new mapfish.widgets.editing.StringProperty( {name: 'name', showInGrid: true}), new mapfish.widgets.editing.TextProperty( {name: 'description', showInGrid: true} ) ] } } }; new Ext.Viewport({ layout: 'border', items: [ new Ext.BoxComponent({ region: 'north', el: 'north', height: 32, margins: {left: 5,top: 5} }), { region: 'east', id: 'east-panel', title: 'Tools', width: 400, items: [{ title: 'Editing', id: 'editing-panel',

13 Created by XMLmind XSL-FO Converter.

Web Mapping Application

bodyStyle: 'padding: 3px', layerConfig: layerConfig, map: map, xtype: 'featureediting' }, { title: 'Help', id: 'help', contentEl: 'helptext' }] }, { region: 'center', title: 'Map', map: map, xtype: 'gx_mappanel', layers: [osm], center: new OpenLayers.LonLat(18.4090782,47.1908359).transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") ), zoom: 15 } ,{ region: 'west', id: 'west-panel', title: 'West', split: true, width: 200, minSize: 175, maxSize: 400, collapsible: true, margins: '0 0 0 5', layout: 'accordion', layoutConfig:{ animate: true }, items: [{ contentEl: 'west', title: 'Layer Tree', border: false, xtype: 'layertree', map: map }, { id: 'recenter-widget', title: 'Recenter', xtype: 'coordsrecenter', map: map, labelAlign: 'top', hideMode: 'offsets', showCenter: true, scales: [1000000, 2500000, 5000000, 10000000, 25000000], bodyStyle: 'padding: 5px', defaults: { width: 170 } }] } ] }); }); Geocaching example (MapFish - Rails - PostgreSQL/PostGIS - OpenStreetMap) Choose a layer in the list of layers to edit Import data for the current extent to edit existing data

14 Created by XMLmind XSL-FO Converter.

Web Mapping Application

Select a feature by clicking on it, modify its vertices and/or attributes To delete a feature, click on it and hit the Delete button To create a feature, select the drawing tool and draw the feature Modified/Inserted/Deleted features appear in the grouping grid When done with editing, click on commit to save modifications

Bibliography Camptocamp: MapFish Documentation, http://www.mapfish.org/doc/ Ext JS ApI, http://dev.sencha.com/deploy/dev/docs/index.html GeoExt Community: GeoExt, 2009-2010, http://www.geoext.org/ MapFish APIdoc: http://www.mapfish.org/apidoc/trunk/files/mapfish/MapFish-js.html Pirmin Kalberer: MapFish Implementation, Developer Guide - Ruby on Rails Server, Sourcepole AG, 2009, http://mapfish.org/doc/implementations/rails.html

15 Created by XMLmind XSL-FO Converter.