HSLayers,MapFish and others

16.12.2008 – 9:38 am


OpenLayers is JavaScript library for displaying geographic data in web browsers. It became very popular last years, since it is very easy to use and looks cool. With OpenLayers, it is possible to manage all kind of OGC Services (WMS, WFS, ) and proprietary maps (such as Google Maps, Yahoo Maps, ….). Since it uses SVG (Firefox, Opera and Safari) and VML (IE) for vector data rendering, it is usable for direct vector data editation. Since it works well, with proj4js.js library, direct data reprojection is possible.

I personally like OpenLayers very much, because of it is great-looking and it is relatively easy to write custom controls and layer types. For example, at HS-RS, we have special ‘MapServer Layer’, with custom attributes and switches. I wrote new OpenLayers.Layer.HSMapServer and we can use is in our new OpenLayers-based applications.


Ext JS is a cross-browser JavaScript library for building rich internet applications. It includes:

  • High performance, customizable UI widgets
  • Well designed and extensible Component model
  • An intuitive, easy to use API
  • Commercial and Open Source licenses available

Yeah, Ext is cool too. Everything is done and it looks great. When I say, ‘everything’, I mean stuff like grids, good-looking forms, application layouts and others.

We (at HS-RS) were not the only one, who came with the thought, putting this two libraries together.


MapFish is composed of two parts: MapFish Client and MapFish Server. MapFish Client is a JavaScript framework based on OpenLayers for the mapping part, and on ExtJS for the GUI (widgets) part. MapFish Server is responsible for server side treatments and composed of several modules which can be implemented in several languages such as Python, Java, PHP.

MapFish does contain lots of interesting features, including advanced LayerTree, Toolbar or Printing. The GUI can be rather complex or more simple.

I would call the MapFish components ‘Ext-Centric’. The components are classes based on Ext-widgets. Some (all?) components are missing support for internationalization. The server part is mainly written in Java.


GeoExt is a JavaScript library providing the groundwork for creating web-mapping applications based on OpenLayers and Ext.

Looks like the same target, MapFish has. Quoting from the MapFish Blog:

  • The goal of the GeoExt library is to aggregate OpenLayers and ExtJS in order to provide easy to use components for the creation of client UI.
  • MapFish uses GeoExt as a standalone library and has specific client components based on GeoExt.
  • GeoExt is server agnostic.
  • MapFish server is able to work with GeoExt component

So, at the first glance, MapFish development will be more server-focused, while GeoExt will move towards client-side development. Anyway, the project is supported by MapFish, CampToCamp and OpenGeo, who are well known companies in the FOSS4G world.


HSLayers is something, like “JavaScript library providing the groundwork for creating web-mapping applications based on OpenLayers and Ext”. Help Service – Remote Sensing started do develop it around 1,5 years ago. The goal is, to have OpenLayers-based components for our standard mapping clients (which is currently Java-based). When we were looking around, if there would be some library, for easier widgets creation, we found ExtJS (2.0.betaSomething) and naturally, we took it as base for our applications.

We try to build the components more OpenLayers-centric. For example, the layer-tree code. MapFish creates new component based on Ext:

145 	mapfish.widgets.LayerTree = function(config) {
146 	    Ext.apply(this, config);
147 	    mapfish.widgets.LayerTree.superclass.constructor.call(this);
148 	};
150 	Ext.extend(mapfish.widgets.LayerTree, Ext.tree.TreePanel, {
1188 	    onRender: function(container, position) {
1189 	        if (!this.el) {
1190 	            this.el = document.createElement('div');
1191 	        }
1193 	        mapfish.widgets.LayerTree.superclass.onRender.apply(this, arguments);
1194 	    }
1196 	});

And LayerTree initialization looks like

        var tree = new mapfish.widgets.LayerTree({
          map: map, el: 'tree', 
          showWmsLegend: true,
          plugins: [

HSLayers tries to write the components as OpenLayers-Controls:

61 	OpenLayers.Control.HSLayerSwitcher =
62 	  OpenLayers.Class(OpenLayers.Control, {
1264 	    CLASS_NAME: "OpenLayers.Control.HSLayerSwitcher"
1265 	});

And it usage looks like

 var layerSwitcher = new OpenLayers.Control.HSLayerSwitcher({container:somePanel});

Disadvantages of OpenLayers and ExtJS

The client-desktop has to be well-equipped machine. 512MB of RAM is minimum, you have to have. And, the internet connection, you use, can not be only GPRS.

  • ext-all.js has 527K
  • OpenLayers.js has 586K
  • When you add all components from HSLayers (MapFish will be similar) it makes another K of code. And you did not started to write your application yet.
  • The images and CSS do take some Kbytes as well

This size of JavaScripts is calculated from compressed files. You could use only separate components (not ext-all.js, but some ext-custom.js), but in really complex applications, this is not worth to do.

Another disadvantage of Ext is, that applications based on Exts code, do have to be open-sourced as well, or you have to buy the Developer licence. This could be limiting for some projects.

Big disadvantage of current HSLayers is, that is is closed-source yet. We are working on base components and most of them should be opensourced later, as mature project. Currently, you can have a look at some example applications, which are not working properly most of the time, due to continuous changes in the source code :-).

Share Button

Post a Comment