Cleopatra: Publishing GML data as interactive SVG maps

Cleopatra is a proof of concept for generating SVG maps from GML data sources. The conversion process is intended to occur at runtime, providing a publishing layer between a GML data source and end users. End users could be on different platforms and have different requirements of the data. To this end, it is desirable to publish GML data using open standards, which means SVG is an ideal output format.

The overriding project goals were customization and interactivity. Customization of the output maps is important because of potentially widely varying end user needs. Interactivity is the key distinguishing feature between paper and computer maps. This presentation is a description of how we used existing technologies to implement the conversion of GML to interactive SVG maps, the limitations of current tools, and the potential extensions of the project.

Conversion process

GML and SVG are both XML encodings; therefore the natural conversion tool is XSLT. However, the GML schema allows for extensions. Spatial data is well defined and fixed, but non-spatial data is not. The solution is to use XPath parameters to locate all required information. These and other customizable conversion parameters are stored in an XML file. The DOM exposed by SVG can be manipulated by scripting. ECMAScript files containing functions for map interaction are included in the output SVG.


Useful maps tend to be large relative to typical computer screen sizes, and they come at many different scales. Therefore zooming and panning are important user interface features of an online map. SVG has built-in zooming capabilities; however, the default zooming and panning behaviours in most SVG viewers are not ideally suited to map viewing. Firstly, some map components should not change under zoom and pan operations, like legends and UI controls. Secondly, it is helpful to provide some indication of view context: what region of the full map is represented by the current view. Scripting makes both of these things possible.

The Cleopatra SVG maps contain a key map, which is a small version of the main map with a superimposed rectangle describing the current view. Panning is achieved by dragging the view rectangle around the key map using the mouse. Zooming and additional panning controls are associated with the key map. During the conversion process, the key map and controls can be placed anywhere in the main map window. The controls can be described by any SVG file containing graphics with the correct id attributes. This file can be specified in the conversion settings XML file.

Level of detail

From an end user's point of view, the map should provide exactly the required amount of detail. A user may not know in advance exactly what this level of detail is, or even what map coordinates they wish to view. Providing a high level of detail at a high zoom level throughout a large map requires prohibitive file sizes. Therefore there is a need to dynamically adapt level of detail to current viewing context. Level of detail is also a useful parameter to restrict for other reasons; e.g. an online map provider may wish to link it to the amount a user is willing to pay.

When a user requests a map, parameters describing the requested coordinates and level of detail are input to the conversion process. The original data source, or the XSLT conversion, or both can do any necessary generalization. It is preferable for the data source to output only the necessary GML for the end result. If the user chooses to zoom past a certain level, or pans out of the current map's boundaries, a new map will be requested from the server.


SVG is XML, and can be styled using Cascading Style Sheets (CSS). The same map can be presented to different users with different style sheets, providing a simple solution to the problem of accessibility. CSS identifies classes of elements in the SVG. We take advantage of this in the scripted implementation of interactive styling.

Interactive styling is, in a sense, another form of customization. A user can modify any SVG attributes through scripting, and potentially save their personalized settings for future use. The list of stylable features and their possible attribute values can be stored in the conversion settings XML file.

Data analysis

The most useful information contained in GML is not necessarily spatial, but the data associated with spatial features. Any of this non-spatial data can be copied into SVG as metadata, and accessed by scripting. A click of the mouse can bring up, for example, population statistics or land values.

We can display this type of data, and we can provide simple analysis tools such as graphs and thematic mapping. Thematic mapping is the coloring of map features according to an associated value. The types of data associated with features and available for display and analysis can be stored in the conversion settings XML file.