Web Mapping Application
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
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 Python 2 MVC web framework) and uses JavaScript tools: Ext JS 3 , GeoExt 4 and OpenLayers 5 .
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 GeoJSON 6 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 plugin 7 : ruby script/plugin install http://www.mapfish.org/svn/mapfish/implementations/rails-plugin/mapfish/trunk
Install MapFish client: rake mapfish:install_client
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
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 Protocol 8 .
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 <body> 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:
<!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()
],
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
}
}]
}
]
});
});
</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>
14
Created by XMLmind XSL-FO Converter .
Web Mapping Application
<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>
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 .
