Application Development in Web Mapping 7. - Web Mapping Applicationw3.geo.info.hu/~ng/tamop_jegyzet/pdf/ADW7.pdf · · 2011-05-30Application Development in Web Mapping 7. module

University of West Hungary, Faculty of Geoinformatics

László Kottyán

Application Developmentin Web Mapping 7.

module ADW7

Web Mapping Application

SZÉKESFEHÉRVÁR

2010

The right to this intellectual property is protected by the 1999/LXXVI copyrightlaw. 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 ormechanical, including photocopying, recording, or by any information storage and

retrieval system without express written permission from the author/publisher.

This module was created within TÁMOP - 4.1.2-08/1/A-2009-0027 "Tananyagfejlesztéssel aGEO-ért" ("Educational material development for GEO") project. The project was fundedby the European Union and the Hungarian Government to the amount of HUF 44,706,488.

Lector:

Antal Guszlev

Project manager:

András Szepes

Professional project manager:

Gábor Mélykúti, dean

Copyright © University of West Hungary Faculty of Geoinformatics 2010

Table of Contents7. Web Mapping Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

7.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17.2 Installing MapFish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17.3 Database modification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27.4 Generating MapFish resource . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37.5 Creating the mapping client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

7.5.1 Client settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57.5.2 User interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57.5.3 Creating Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

7.6 Source code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Chapter 7. Web Mapping Application

7.1 IntroductionMapFish is a framework for developing rich web mapping applications. It is based on Pylons1 (a Python2 MVCweb 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 clienttool. 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 protocolfor creating, reading, updating, deleting features.

MapFish server has a Ruby on Rails implementation, MapFish plugin and gem, which makes it possible to createMapFish 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 appli-cation for displaying, creating and modifying geocaches top of on OpenStreetMap basemap. On client-side wewill work with MapFish, Ext JS and OpenLayers. On server-side we will use Rails and PostgreSQL with PostGISextension. 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.

7.2 Installing MapFishWe 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 Geocachingcd Geocaching

Install the MapFish plugin7:

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

1 Pylons: http://pylonshq.com/2 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

Application Development in Web Mapping 7. 2010

ADW7-2 © University of West Hungary Faculty of Geoinformatics, 2010

Install MapFish client:

rake mapfish:install_client

Some additional extensions are necessary:

sudo gem install GeoRubyruby script/plugin install git://github.com/fragility/spatial_adapter.gitsudo 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.

7.3 Database modificationBefore setting up the database connection, we improve the geocache and walk tables in szfv_osm_db addingprimary 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 andadd two definition records here. If it is not set, the web application will have problem to handle geometries.

Kottyán László Web Mapping Application

© University of West Hungary Faculty of Geoinformatics, 2010 ADW7-3

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

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

Resource generation, like scaffolding, produces controller and model files. We have an existing database, so wedon't need migration files.

Type:

ruby script/generate mapfish_resource --skip-migration Geocacheruby script/generate mapfish_resource --skip-migration Walk

Open the generated model files from app/models and add set_table_name and set_primary_keymethods 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, updateand destroy methods. The methods renders table records to GeoJSON format. To access GeoJSON data onclient-side, we can use MapFish Protocol8.

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



In controller The SRID constant gets value from szfv_osm_db geometry_column table. It was setin Section 7.3.

Start the server and open http://localhost:3000/geocaches or http://localhost/walks and you should get GeoJSONoutputs, rendered by index methods.

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

7.5 Creating the mapping clientThe client is written in JavaScript, mainly. You can place all the JavaScript content in public/javascriptsfolder and the HTML content in views folder. For production use, you should build and install the compressedruntime libraries:

http://localhost:3000/geocaches

http://localhost/walks



rake mapfish:build_scriptsrake 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.

7.5.1 Client settings

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

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

Mapfish Protocol uses this URL to access GeoJSON data.

7.5.2 User interface

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

http://localhost:3000



We will use:

• North to display an application title (line 104, 181).

• West to display MapFish LayerTree (line 153) and Recenter (line 159) widgets.

• 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).

7.5.3 Creating LayersThe main application is in an Ext function (line 34). For the layers we use OpenLayers, setting some controlsand 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 GMLlayers with GeoJSON format.

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

The main user interface, the Ext JS Viewport container contains all the mapping elements (MapFish widgetsand 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 nextconfigurations 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 thesource GeoJSON data from Geocache table. The other parameters set the displaying data in FeatureEditingPanel.

The lines layers configuration displays the walks in editing panel.

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

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.

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 ischanged.

7.5.3.2 Center region

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

7.5.3.3 West region

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

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



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.

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



7.5.3.4 Body

The HTML <body> contains div tags displaying additional elements.

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

7.6 Source codeThe full source code of the client is provided here:

<!DOCTYPE html><html><head> <title>Geocaching example (Mapfish - Rails - PostgreSQL/PostGIS - OpenStreetMap)</title> <link rel="stylesheet" type="text/css" href="mfbase/ext/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="mfbase/mapfish/mapfish.css" /> <script type="text/javascript" src="mfbase/openlayers/lib/Firebug/firebug.js"></script> <script type="text/javascript" src="mfbase/openlayers/lib/OpenLayers.js"></script> <script type="text/javascript" src="mfbase/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="mfbase/ext/ext-all-debug.js"></script> <script type="text/javascript" src="mfbase/geoext/lib/GeoExt.js"></script> <script type="text/javascript" src="mfbase/mapfish/MapFish.js"></script>



<script type="text/javascript" src="examples/examples.js"></script> <style type="text/css"> 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; } </style> <script type="text/javascript"> // 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() ], 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', 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 } }] } ] }); }); </script></head><body> <div id="north"> <p style="font-size:16pt;color:#15428B;font-weight:bold"> Geocaching example (MapFish - Rails - PostgreSQL/PostGIS - OpenStreetMap)</p> </div> <div id="helptext"> <ul class="list"> <li class="list">Choose a layer in the list of layers to edit</li> <li>Import data for the current extent to edit existing data</li> <li>Select a feature by clicking on it, modify its vertices and/or attributes</li> <li>To delete a feature, click on it and hit the Delete button</li> <li>To create a feature, select the drawing tool and draw the feature</li> <li>Modified/Inserted/Deleted features appear in the grouping grid</li> <li>When done with editing, click on commit to save modifications</li> </ul> </div> <div id="west"></div> </body></html>

BibliographyCamptocamp: 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

Documents

Application Development in Web Mapping 7. - Web Mapping Applicationw3.geo.info.hu/~ng/tamop_jegyzet/pdf/ADW7.pdf · · 2011-05-30Application Development in Web Mapping 7. module