|
MapFish is an open source framework for producing online mapping applications. MapFish has two components: Server and Client. The main components of the MapFish Client consists of OpenLayers, the ExtJS framework, and the GeoExt framework. MapFish Server is "map server agnostic" and supports a range of mapping servers and web server languages. The combination of these tools and frameworks can produce a powerful web application with much of the look and feel of an offline application.
The most visible side of MapFish is the MapFish Client. This is a framework of OpenLayers, the ExtJS framework, the GeoExt framework, and some "glue" code. We have covered OpenLayers before. This is a popular open source JavaScript library that can produce attractive "slippy" AJAX maps. The ExtJS framework is another JavaScript framework. Information and a download can be found at: http://extjs.com/products/extjs/ . ExtJS is a user interface framework that includes a number of widgets and controls components. These are effective and produce the 'MapFish look' when combined with OpenLayers. This Oxford Archaeology Sites Map Demo produces a good example of this look:
One potential problem of ExtJS is that it uses the GPL v3 license. Described by some as a "viral license", this has requirements regarding the licenses used to release accompanying software. There is also a commercial license. GeoExt is JavaScript library that supplies further classes to help in the creation of a web mapping application that uses OpenLayers and ExtJS. GeoEXt features include: Feature Management, an ExtJS panel that hosts OpenLayers, popup windows that can be anchored to map features, a WMS capabilities reader, and zoom level management. Further information and downloads can be found at: http://www.geoext.org/trac/geoext/wiki/Home .
In common with OpenLayers, much of MapFish is documented with simple feature examples. The following source code is a simple map window sample. An ExtJS width allows the user to select different continents to be displayed in the main map panel, and serves as a good example of how these libraries are used together. Here is the code: 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
<html>
<head>
<title>Map in a Complex Layout</title>
<link rel="stylesheet" type="text/css"
href="/../../mfbase/ext/resources/css/ext-all.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">
// Because of a bug in Firefox 2 we need to specify the MapFish base path.
// See https://bugzilla.mozilla.org/show_bug.cgi?id=351282
var gMfLocation = "../../mfbase/mapfish/";
</script>
<script type="text/javascript" src="/../../mfbase/mapfish/MapFish.js">
</script>
<script type="text/javascript" src="/../examples.js"></script>
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
</style>
<script type="text/javascript">
// reference local blank image
Ext.BLANK_IMAGE_URL = '../../mfbase/ext/resources/images/default/s.gif';
Ext.onReady(function(){
var map = new OpenLayers.Map($('olmap'));
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer:
0});
map.addLayers([wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(17, 2), 2);
var window = new Ext.Window({
title: 'Map',
width: 500,
height: 300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: true,
bodyStyle: 'padding:5px;',
items: [{
xtype: 'mapcomponent',
map: map
}]
});
window.show();
var store = new Ext.data.SimpleStore({
fields: ['value', 'text', 'bbox'],
data : [['OC', 'Oceana', new OpenLayers.Bounds(56.0234375,
-72.53125, 214.2265625, 32.9375)],
['NA', 'North America', new OpenLayers.Bounds(-186.37890625,
-2.21875, -28.17578125, 103.25)],
['SA', 'South America', new OpenLayers.Bounds(-146.828125,
-71.828125, 11.375, 33.640625)],
['AF', 'Africa', new OpenLayers.Bounds(-58.9375,
-51.7890625, 99.265625, 53.6796875)],
['EU', 'Europe', new OpenLayers.Bounds(-23.078125,
26.2578125, 56.0234375, 78.9921875)],
['AS', 'Asia', new OpenLayers.Bounds(15.59375, -21.90625,
173.796875, 83.5625)]]
});
var window = new Ext.Window({
title: 'Shortcuts',
width: 200,
height: 100,
minWidth: 200,
minHeight: 100,
layout: 'fit',
plain: true,
bodyStyle: 'padding: 5px;',
items: [{
xtype: 'shortcuts',
map: map,
store: store,
templates: {
header: new Ext.Template("Choose a continent in the list"),
footer: new Ext.Template("The map will automatically center
to this location")
}
}]
});
window.setPagePosition(20, 40);
window.show();
});
</script>
</head>
<body>
<!--
body element must not start with text to prevent IE bug
http://extjs.com/forum/showthread.php?t=7912&highlight=createRange
-->
<h1>MapFish example</h1>
This example shows how to use the MapComponent class to integrate a OL map
into a window layout.
<div id="olmap">
</div>
</body>
</html>
|
MapFish Server is a server framework that uses PostGIS and a number of other components such as SQLAlchemy (Python SQL toolkit), Pylons (Python web framework), Shapely (Python geospatial package). Other map servers (eg. MapServer, GeoServer, or Feature Server) might be preferred if you need to quickly create some map layers. As a development framework, MapFish Server it better suited for applications where customization is required. MapFish Server also makes it easier to implement editable layers. Ie. MapFish client can transfer feature changes to MapFish Server where the underling PostGIS database is updated. This communication uses the RESTful MapFish Protocol. The MapFish website has a useful How To Use MapFish Server article. Further information on all things MapFish including documentation, samples, and downloads, can be found at the MapFish website
 |
Twitter @geowebguru
Subscribe to this comment's feed
