GEMMA Technologies and APIs

A few words about the main technologies and APIs used in GEMMA. Using these has helped make the project achievable within the timeframes we have had.

JQuery and JQuery UI

A rich and comprehensive extension to the JQuery Javascript framework, JQuery UI allows easy and uniform skinning of user interface elements (buttons, tabs, dialog boxes). JQuery itself comes with a large number of functions that are more powerful and simpler to use than their vanilla Javascript equivalents.

JQuery Datatables

JQuery Datatables builds on JQuery, incorporating the JQuery UI look and providing, with a minimum of fuss, powerful pageable, sortable, searchable and flexible tables of data.

Mapnik 2

Mapnik, the map renderer used for the “default” OpenStreetMap. It is a C++ library but comes with mostly complete Python bindings, which I use. Mapnik received a major version upgrade very recently, jumping from version 0.7 to 2. The new version allows “expressions” – certain values (e.g. text captions) that can be specified during the creation of each feature, rather than hard-coding them in to the code or stylesheet. These are used to create the “captioned markers” that are a feature of GEMMA.


I’m mentioning Python here because it forces me to write neat code! The tile renderer is a number of Python scripts calling Mapnik. Mapnik itself uses the (Py)Cairo graphics renderer to create the images and PDF maps, but I am also extending its use for creating full-blown PDF “printed sheets”, by including adornments on the area outside of the map. I’m using RSVG to include the GEMMA logo (imported in as an SVG) in all GEMMA’s PDF maps.

The two processes – producing images for the website (and iPhone), and producing PDFs, are quite different. In the former, Mapnik is called repeatedly for each layer, and the order and opacities of the layers are controlled with OpenLayers. In the latter. Mapnik itself needs to handle the ordering and opacities, as well as producing a high quality (scalable) PDF.

Google Maps Javascript API v3

The original mass-application mapping API and still the most popular. It’s best feature is the simple way that custom colours can be applied – in only a few lines of Javascript, we are able to pull in a nice greyscale layer for use as a background map in GEMMA. Interestingly, Google very recently allowed that extremely heavy users of the API will start to be charged. For custom coloured maps, the threshold is much lower than for “normal” Google Maps, although we don’t anticipate it would be an issue for GEMMA.


OpenLayers is also being used in GEMMA, although limited to the “preview” map that appears when you are adding captioned markers to the map. It also can pull in the Google Maps tiles with custom colours used in the main interface.

Google Fusion Tables

Google’s powerful and extensible cloud-based tables are used to store data collected for use in GEMMA.

Google and Twitter Authentication Libraries

We use both Google and Twitter authentication in GEMMA, rather than creating our own standalone user data storage and authentication structure. The world has enough logins.

iPhone App development (Objective-C coding)

In order to create a native iPhone app, you need to learn Objective-C. Thankfully, Steve is an experienced Objective-C person.


1 comment

  1. Excellent project! I’m interested in how you have layered multiple tiled images. Is that done within your google map instance with multiple custom image map types? If so this is the only example I’ve found. Not much documentation on this. Would you care to share your strategy? Thanks

Add your comment now