Application Development in Web Mapping 7. Web Mapping ...

perchmysteriousΔιαχείριση Δεδομένων

30 Νοε 2012 (πριν από 4 χρόνια και 10 μήνες)

240 εμφανίσεις


Created by
XMLmind XSL
-
FO Converter
.

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 Wes
t 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 copyrigh
t 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 photoc
opying,
recording, or by any information storage and retrieval syste
m without express written permission from the author/publisher.





iii


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





1


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 Mapsf
ish 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


Web Mapping Application



2


Created by
XMLmind XSL
-
FO Converter
.

Some additional extensions are necessary:

sudo gem install GeoRuby

ruby script/plugin install git://github.com/fragi
lity/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 Postgr
eSQL 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 gi
ven 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:


Web Mapping Application



3


Created by
XMLmind XSL
-
FO Converter
.


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 client
-
side, we can use MapFish Protocol
8
.





8

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


Web Mapping Application



4


Created by
XMLmind XSL
-
FO Converter
.

In controller The
SRID

constant gets value from
szfv_osm_db

geometry_column table
. It was set in Section
7.3.

Start the se
rver 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):


Web Mapping Application



5


Created by
XMLmind XSL
-
FO Converter
.


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.


Web Mapping Application



6


Created by
XMLmind XSL
-
FO Converter
.



East to display MapFish FeatureEditingPanel (line 118) widget.



Center to display GeoExt.MapPanel with OpenLayers content (line 128
-
133).

Li
ne 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).


Web Mapping Application



7


Created by
XMLmind XSL
-
FO Converter
.


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 layerCo
nfig 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.


Web Mapping Application



8


Created by
XMLmind XSL
-
FO Converter
.


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.


Web Mapping Application



9


Created by
XMLmind XSL
-
FO Converter
.


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


With Commit bu
tton 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 coord
inates (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


Web Mapping Application



10


Created by
XMLmind XSL
-
FO Converter
.

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.


Web Mapping Application



11


Created by
XMLmind XSL
-
FO Converter
.


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


5.3.4.

7.5.3.4 Body

The HTML
<body>

contains
div

tags displaying additional elements.


Web Mapping Application



12


Created by
XMLmind XSL
-
FO Converter
.


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 i
s 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()



],


Web Mapping Application



13


Created by
XMLmind XSL
-
FO Converter
.


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: 'descrip
tion', showInGrid: true} )


]


}


},


lines: {


text: 'Walks',


protocol: new mapfish.Protocol.MapFish({


url: mapfish.Util.formatU
RL(


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',


titl
e: 'Tools',


width: 400,


items: [{


title: 'Editing',


id: 'editing
-
panel',


Web Mapping Application



14


Created by
XMLmind XSL
-
FO Converter
.


bodyStyle: 'padding: 3px',


laye
rConfig: layerConfig,


map: map,


xtype: 'featureediting'


}, {


title: 'Help',


id: 'help',


cont
entEl: '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">


Geo
caching 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 ex
isting data</li>


Web Mapping Application



15


Created by
XMLmind XSL
-
FO Converter
.


<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 Doc
umentation,

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 Kalb
erer:
MapFish Implementation, Developer Guide
-

Ruby on Rails Server,

Sourcepole AG, 2009,
http://mapfish.org/doc/implementations/rails.html