A plugin to combine JQuery and OpenLayers

Some years ago, during the devolopment work for interactive geographic map project ‘EduGIS‘, we choose to use libray ‘Mapbuilder‘. The design of this library is heavily based on client side use of xml and xslt. At the time this seemed to be the best  way to get around some very limited browser capabilities.

During the years, browser capabilities were improved and Javascript libary ‘OpenLayers’ grew to maturity and was eventually integrated into the Mapbuilder libary. In the meantime, it had become clear that client side xml/xslt did not live up to what it had promised to be.
Implementations were incompatible and constantly changing and in july 2008, the community behind Mapbuilder  announced end of life. Some minor changes are still being applied  to support new browser versions, but major changes and completely new browsers such as Google’s Chrome are no longer supported.

These developments forced the EduGIS project to seriously look for alternatives. One obvious alternative would be GeoExt. However, since EduGIS requires some features that are currently not yet supported in GeoExt, this required a much deeper understanding of the ExtJs libray (now named Sencha) on which GeoExt is based. Before spending time on the not so freely licensed ExtJS library, a further investigation of other libraries was done.

An obvious alternative to ExtJs seemed to be the JQuery library. This library was not only being used by many interactive website developers, but it also seemed to be supporting most of the basic functions required by EduGIS.  By cutting and pasting some existing code and doing some modifications here and there, a basically working example was created.
After this work, the possibilities of the JQuery library and its accompanying plugins proofed to be quite strong. However, it was also discovered that the amount of needed functionality and number of details to be handled is quite enormous. Wouldn’t it be a good idea to make a re-usable plugin so that more projects could benefit from this work? If this idea should work, then maybe other developers could become interested and add functionalities or discover problems and maybe even fix them?

So I started to do some reading on creating JQuery plugins and started development work on the go. The resulting plugin is tentatively called ‘jquery.mapwidget’. Two examples are made available with this article:
An alpha version of the future EduGIS website: http://research.geodan.nl/mapwidget/
A basic plugin test page that is stripped to the bare minimum for demonstrating and testing the capabilities of the plugin: http://research.geodan.nl/mapwidget/plugintest.html
From the header of jquery.mapwidget.js:
Some basic ideas for this plugin:
- OpenLayers is a fully functional map library. Its functions should be (re-) used as much as possible
- The JQuery libray allows developers to quickly create highly interactive web applications across multiple browser platforms
- This plugin, 'mapwidget', aims to combine both of these worlds
The main idea behind mapwidget is to be able to transform webpages from merely showing a single (though fully functional)
map into full featured web applications. Instead of having all controls inside the Openlayers map, the mapwidget plugin
allows developers to put these controls anywhere on the webpage and allow jQuery to take control of their look and feel.
The visual styles applied by the plugin should relate only to functionality (collapse, slide, hide, unhide, ..).
Other style settings (fonts, colors, backgrounds, ..) should be applied by the webpage designer.

Some of these map controls are:
- an external overview map, to be incorporated in for instance a jquery.dialog()
- an external scale bar, an external geographic mouse coordinate tracker
- an external legend/layer manager for selecting base layers, managing layer order, layer transparency, displaying layer legends etc.
- an external layer catalogue widget that allows you the select layers to be added to the map from among a large catalogue of layers,
possibly even including the possibility to add layers to the catalogue from mapserver capabilities and CSW catalogues
Of course, developers should be able to combine the resulting map application with other jquery libraries and plugins,
such as jquery.ui.layout.

Mapwidget API basics:
This plugin adds a new wrapper method 'mapwidget()' to JQuery.
The mapwidget() method generally expects three parameters:
1. An OpenLayers Map. This is the map that the widget will relate to
2. A mapwidget type or function selector (string)
3. An optional Javascript options object
The plugin applies the selected function on the currently wrapped jQuery set which will usually result in some map information being
displayed and possibly some map interactions being added to the DOM elements enclosed in the wrapped set.

2 thoughts on “A plugin to combine JQuery and OpenLayers

  1. Very nice. I’ve been looking for something that combines JQuery with OpenLayers, and this seems like an excellent start. The original post was done in June (roughly 7 months ago), has this started to move to some sort of project status?

Leave a Reply